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

我试图找到浏览器视口的确切高度和宽度，但我怀疑Mozilla或IE给我的号码是错误的。以下是我的身高计算方法：

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

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

---

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

我一直使用

document.documentElement.clientHeight

/

clientWidth

。我认为在这种情况下您不需要或条件。

使用此技巧：或代码：

您可以尝试以下方法：

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];
}

（）

---

但是，甚至不可能在所有浏览器中都获得视口信息（例如，在怪癖模式下的IE6）。但是上面的脚本应该做得很好：-）

您可以使用较短的版本：

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

---

试试这个..

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

函数视口（）
{
var w=Math.max（document.documentElement.clientWidth，window.innerWidth | | 0）
var h=Math.max（document.documentElement.clientHeight，window.innerHeight | | 0）
var viewsize=w+“，”+h；
警报（“您的视图端口大小为：“+viewsize”）；
}

它不会痛的。一旦找到有效值，则不会对其进行计算。如果您在其中输入了错误，则应为：“document.documentElement”。这在quircksmode中不起作用。。。在FF上，它给出了整个文档的高度，而不仅仅是“clientHeight”，在IE上，它给出了“0”。同意

document.documentElement.clientWidth

是纯JS的方式。同意。From:-“

document.documentElement

实际上是

元素”。“

document.documentElement.clientWidth

和

clientHeight

仍然提供视口的尺寸，而不是

元素的尺寸。（这是一条特殊规则，仅适用于此属性对。在所有其他情况下，使用元素的实际宽度。）”因此，它“在所有情况下”都应该有效从IE6标准模式及以上。这些值不包括滚动条（与

window.innerWidth

和

innerHeight

不同）。我尝试在不使用jQuery的情况下执行此操作。我想我应该更清楚一点。被一个bug困扰了5个小时，结果证明jquery在执行

$（document）.width（）或
$（window）.width（）时在FF/Chrome中返回的值不一样<代码>窗口。innerWidth
非常有效。它在iframe内部似乎不起作用，而是返回iframe大小。有什么线索吗？@GarciaWebDev所以你的意思是它工作正常；-）@Dee2000我想说的是，当在常规页面上测量时，得到的是浏览器视口大小，但当从iframe内部测量时，得到的是iframe的文档大小，而不是浏览器视口。不确定我是否解释得很好，请告诉我是否应该重新表述。@GarciaWebDev在一个简单的页面上，你“认为”你得到了“浏览器”视口大小，但你没有。您将获得您所在HTML页面的视口大小。无论该页面是“顶部”，还是在iframe或嵌套的iframe中，它始终是您所在HTML页面的视口大小。如果您想知道顶部（或父级）页面的视口大小，只要您的iframe是“友好的”（而不是跨域的），那么您可以简单地将“窗口”替换为“父级”或“顶部”。对于您测试的每个值（例如parent.innerWidth）。谢谢！你刚刚救了我的命！：）也可以使用库，该库处理跨浏览器视口检测；）