我正在尝试查找浏览器视口的确切高度和宽度，但我怀疑 Mozilla 或 IE 给了我错误的数字。这是我的身高方法：
var viewportHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
我还没有开始研究宽度，但我猜它会是类似的东西。
有没有更正确的方法来获取这些信息？理想情况下，我希望该解决方案也适用于 Safari/Chrome/其他浏览器。
【问题讨论】：
标签： javascript cross-browser viewport
你可以试试这个：
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 的 quirks 模式）。但是上面的脚本应该做得很好:-)
【讨论】：
$(document).width() 或 $(window).width() 时不会在 FF/Chrome 中返回相同的值。 window.innerWidth 效果很好。
您可以使用较短的版本：
<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>
【讨论】：
我一直只使用document.documentElement.clientHeight/clientWidth。在这种情况下，我认为您不需要 OR 条件。
【讨论】：
document.documentElement.clientWidth 是纯 JS 的方式。 responsejs.com/labs/dimensions
document.documentElement 实际上是 <html> 元素”。 "document.documentElement.clientWidth 和 clientHeight 仍然给出视口的尺寸，而不是 <html> 元素的尺寸。（这是一个特殊的规则，它只适用于这个元素，只适用于这个属性对。在所有其他情况下，使用元素的实际宽度。）”因此它应该在 IE6 标准模式及更高版本中“在所有情况下”工作。这些值不包括滚动条（与window.innerWidth 和innerHeight 不同）。
试试这个..
<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>
【讨论】：
【讨论】：