如何获得浏览器左右两侧的距离？

Question

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

Answer 1

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

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

备注：

• body，即使得到所有主流浏览器（IE 5.5 +，FF3 +，Chrome，Opera，Safari）的支持，W3C从未定义过，因此浏览器支持可能会有所不同。
• clientWidth有一个W3C spec，但在IE＆lt;＆lt; 9。

这里有fiddle比较两者。

---

在IE＆lt; 9中不支持

编辑 window.innerWidth，因此使用window.innerWidth和innerWidth（对于较旧的IE）的混合可能是最好的的方法：

clientWidth

此外，尽管W3C未对var viewportWidth = window.innerWidth || document.body.clientWidth; 进行标准化，但所有主流浏览器都支持它，因此很多人认为它足够可靠，只能使用clientWidth代替W3C标准{{1} }。

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

innerWidth

如果您使用上述内容，请确保clientWidth有var viewportWidth = document.body.clientWidth; //no scrollbars included 和body。