Question

我看到的所有问题都回答：

$(window).height();

但是这不会返回视口的大小，而是返回页面的大小，例如，如果我将<body>设置为高度1000px，则返回1000但不返回视图端口的大小。我需要视口大小而不是可滚动的集合页面大小。

Answer 1

你可以尝试

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
if(window.innerWidth !== undefined && window.innerHeight !== undefined) {
var w=window.innerWidth;
var h=window.innerHeight;
} else {
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
}
var txt="Page size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML=txt;
}
</script>
<body onresize="myFunction()" onload="myFunction()">
<p>
Try to resize the page.
</p>
<p id="demo">
&nbsp;
</p>
</body>
</html>

Answer 2

$(window).height();

应该返回视口的高度（即使您设置了body标签的高度，以像素为单位）。我也用：

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

这让我在iOS上更加准确。

$(document).height();

应该返回文档的高度（因此在你的情况下是body标签的高度）。

您确定不使用文档而不是窗口吗？

Answer 3

它将返回视口的大小。

$('#viewportDimensions').text($(window).width() + ', ' + $(window).height());

$(window).resize(function() {
  $('#viewportDimensions').text($(window).width() + ', ' + $(window).height());
});

resize page in fiddle

Answer 4

试试这个：

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];
var x=w.innerWidth||e.clientWidth||g.clientWidth;
var y=w.innerHeight||e.clientHeight||g.clientHeight;
    console.log(x,y);

主要来源：http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

如何获取浏览器屏幕的视口高度？

4 个答案: