javascript - 如何获取浏览器左右两侧的距离？

Question

是否可以获得左右之间的当前距离？不是全宽。

Answer 1

window.innerWidth可用于获取浏览器窗口视口宽度，包括滚动条（如果存在并呈现）。

还有document.body.clientWidth一个不包括滚动条、边距、边框或填充 - 如果您有margin:0; padding:0;并且没有将边框设置为 ，则后 3 个是无关紧要的body，这是使用重置样式表时的情况。否则你只需要补偿这些。

笔记：

• clientWidth，尽管所有主要浏览器（IE 5.5+、FF3+、Chrome、Opera、Safari）都支持，但 W3C 从未定义过，因此浏览器支持可能会有所不同。
• window.innerWidth具有W3C 规范，但在 IE < 9 中不受支持。

这是一个比较两者的小提琴。

---

编辑： window.innerWidth在 IE<9 中不支持，因此混合使用innerWidthand clientWidth（对于较旧的 IE）可能是最好的方法：

var viewportWidth = window.innerWidth || document.body.clientWidth;

此外，尽管clientWidth它没有被 W3C 标准化，但它在所有主要浏览器中都受到支持，因此很多人认为它足够可靠，可以单独使用它来clientWidth代替 W3C 标准innerWidth。

如果不包括滚动条对您的用例很重要，则clientWidth可以用作第一个/唯一选项：

var viewportWidth = document.body.clientWidth; //no scrollbars included

确保body有margin:0，padding:0以防万一您使用上述内容。