使用jQuery获取没有滚动条的浏览器视图的高度和宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (445)

如何使用jQuery获得没有滚动条的浏览器视图的高度和宽度?

以下是我迄今所尝试的:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

此解决方案不考虑浏览器滚动条。

提问于
用户回答回答于

下面是一个通用的JS,它应该在大多数浏览器(FF、Cr、IE6+)中工作:

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}
用户回答回答于
$(window).height();
$(window).width();

然而,使用jQuery并不是获取这些值的必要条件。使用

document.body.clientHeight;
document.body.clientWidth;

若要获得不包括滚动条的大小:

window.innerHeight;
window.innerWidth;

获得整个视图,包括滚动条:

document.body.clientHeight <= window.innerHeight;  // is always true

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励