Question

获取浏览器宽度的常用方法取决于<body>是否有滚动条。例如，window.innerWidth，document.documentElement.clientWidth，$(window).width()，$(window).outerWidth()等都会针对以下两种情况返回不同的结果：

<html>
<body>
<p>No scrollbar.</p>
</body>
</html>

和

<html>
<body>
<p style="height:10000px">Yes scrollbar.</p>
</body>
</html>

$(window).width()等，对于第一种情况都会返回更高的值，因为第二种情况会减去滚动条的宽度。

无论滚动条是否存在，如何可靠地获取浏览器窗口的实际宽度？

修改：建议的可能重复的答案表示使用$(window).width()，而我明确指出$(window).width()不起作用。

Answer 1

请尝试此

我不知道这种方法是否正确。但是你会得到样本窗口的实际宽度 677

$(document).ready(function(){
    $("body").css("overflow", "hidden");
    alert($(window).width());
    $("body").css("overflow", "auto");
});

DEMO

当没有溢出时，您将获得窗口的宽度，滚动条为 677 。 Demo for screen width without scroll bar

当出现溢出时，滚动条的宽度为 660 。 Demo for scree width with scroll bar.

Answer 2

这是viewport properties from the Quirks Mode site的好消息。

window.innerWidth是获得此功能的最简单方式（在IE9 +和所有其他浏览器中均受支持）

// Get the size of the viewport including scrollbars:
var width = window.innerWidth;
console.log('innerWidth=', width);

这是MDN documentation on the innerWidth property。

无论主体的滚动条如何，如何获取浏览器窗口的宽度？

2 个答案: