以跨浏览器的方式查找视口的确切高度和宽度（无原型/ jQuery）

Question

我试图找到浏览器视口的确切高度和宽度，但我怀疑Mozilla或IE是给我错误的数字。 这是我的身高方法：

var viewportHeight = window.innerHeight || 
                     document.documentElement.clientHeight || 
                     document.body.clientHeight;

我还没有开始宽度，但我猜它会有类似的东西。

是否有更正确的方法来获取此信息？ 理想情况下，我也希望该解决方案能够与Safari / Chrome /其他浏览器配合使用。

Answer 1

你可以试试这个：

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

（ http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ ）

但是，甚至无法在所有浏览器中获取视口信息（例如，在怪异模式下的IE6）。 但上面的脚本应该做得很好:-)

Answer 2

您可以使用更短的版本：

<script type="text/javascript">
<!--
function getViewportSize(){
    var e = window;
    var a = 'inner';
    if (!('innerWidth' in window)){
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>

Answer 3

我一直只使用document.documentElement.clientHeight / clientWidth 。 在这种情况下，我认为你不需要OR条件。

Answer 4

试试这个..

<script type="text/javascript">
function ViewPort()
{
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
}
</script>

Answer 5

使用此tipp： http ： //www.appelsiini.net/projects/viewport或该代码： http ：//updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using -jquery /