使用jQuery检索移动浏览器中屏幕的视口高度

Question

我正在尝试在移动浏览器中获取视口高度，而没有浏览器栏的高度，但是我尝试的所有解决方案都不够。

其他人的建议是使用以下内容，但是它对我不起作用。 滚动时，窗口底部仍然出现空白的白色条

var screenHeight = window.innerHeight;
$('.mobile-nav-wrapper').height(screenHeight)

Answer 1

解决方案1：

我没有使用jQuery的答案。 但是使用普通/原始JavaScript不会引起任何问题:)。 以下脚本可让您可靠地检测视口大小（高度和宽度）。

https://github.com/tysonmatanich/viewportSize

用法示例：

<script type="text/javascript">
    var width = viewportSize.getWidth();
    var height = viewportSize.getHeight();
</script>

我已经在几个项目中使用过它，是否必须基于当前视口的宽度/高度而不是使用窗口宽度/高度来重新初始化某些小部件（窗口宽度/高度的计算在所有浏览器中均不一致-有些包含滚动条大小为16像素（作为窗口宽度的一部分），有些则没有）。

示例测试页面： http : //tysonmatanich.github.io/viewportSize/

解决方案2 ：（仅供参考-尽管与OP有关，但不是答案，因此我认为它可以保留）

那么modernizr有一个非常好的增添Modernizr.Mq。 通过它可以交叉检查您处于哪个断点范围...

if(Modernizr.mq("(min-width:320px)")){
//Do job 1
}
else if (Modernizr.mq("(min-width:768px)")){
//Do job 2
}

或根据身高

Modernizr.mq（“（最低高度：800px）”）

http://tysonmatanich.github.io/viewportSize/

Answer 2

我相信您正在寻找的是scrollHeight

scrollHeight属性返回元素的整个高度（以像素为单位），包括填充，但不包括边框，滚动条或边距。

您可以尝试以下方法：

document.body.scrollHeight