以跨浏览器的方式查找视口的确切高度和宽度（没有Prototype / jQuery） [英] Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)

问题描述

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

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

我还没有开始宽度，但我猜这将是类似的东西。 / p>

有更正确的方式获取此信息吗？理想情况下，我希望该解决方案也可以与Safari / Chrome /其他浏览器一起使用。

解决方案

  function getViewport（）{
 
 var viewPortWidth; 
 var viewPortHeight; 
 
 //更符合标准的浏览器（mozilla / netscape / opera / IE7）使用window.innerWidth和window.innerHeight 
 if（typeof window.innerWidth！='undefined'）{
 viewPortWidth = window.innerWidth，
 viewPortHeight = window.innerHeight 
} 
 
 //在符合标准的模式下使用IE6（即使用有效的doctype作为第一行document）
 else if（typeof document.documentElement！='undefined'
&&&typeof document.documentElement.clientWidth！= 
'undefined'&& document.documentElement.clientWidth ！= 0）{
 viewPortWidth = document.documentElement.clientWidth，
 viewPortHeight = document.documentElement.clientHeight 
} 
 
 //旧版本的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在怪异模式下）。但上面的脚本应该做好工作： - ）

I'm trying to find the exact height and width of a browser's viewport, but I suspect that either Mozilla or IE is giving me the wrong number. Here's my method for height:

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

I haven't started on width yet but I'm guessing it's going to be something similar.

Is there a more correct way of getting this information? Ideally, I'd like the solution to work with Safari/Chrome/other browsers as well.

解决方案

You might try this:

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/ )

However, it is not even possible to get the viewport information in all browsers (e.g. IE6 in quirks mode). But the above script should do a good job :-)

这篇关于以跨浏览器的方式查找视口的确切高度和宽度（没有Prototype / jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！