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

Retrieving viewport height of screen in mobile browsers with jquery

本文关键字：屏幕 视口 高度 浏览器 jquery 检索 移动 使用      更新时间：2023-09-26

我试图在没有浏览器栏高度的情况下获得移动浏览器中的视口高度，但我尝试的所有解决方案都没有成功。

其他人建议使用下面的，但它对我不起作用。当滚动时，我仍然会在窗口底部得到一个空白的白色条

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

我相信您正在寻找的是scrollHeight

scrollHeight属性返回中元素的整个高度像素，包括填充，但不包括边框、滚动条或边距。

你可以试试这个：

document.body.scrollHeight

解决方案1:

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

https://github.com/tysonmatanich/viewportSize

示例用法：

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

我已经在几个项目中使用过它，如果我必须根据当前的Viewport宽度/高度而不是使用窗口宽度/高度来重新初始化一些小部件（窗口宽度/高的计算在所有浏览器中并不一致-有些浏览器将滚动条大小16px作为窗口宽度的一部分，有些则不一致）。

样本测试页面：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/

相关文章：