移动调试时，InnerWidth $(window).width() 与实际宽度不匹配答案

【问题标题】：InnerWidth $(window).width() do not match actual width when in mobile debugging移动调试时，InnerWidth $(window).width() 与实际宽度不匹配
【发布时间】：2016-09-28 02:40:47
【问题描述】：

我正在使用 Chrome 开发移动网站。在这个网站上，我根据屏幕的宽度做了很多事情。我遇到了一个问题，当我尝试通过

检索宽度时

window.innerWidth

或

$(window).width()

它与我在调试器中看到的实际宽度略有不同

例如，我删除了所有 css 并且内容运行了这段代码

<html style-"width: 100vw"> <!-- 100% has the save effect -->
<head>
</head>
<body id="body" style-"width: 100vw">
</body>
</html>

innerWidth 属性为 375（模拟 iphone6）但实际宽度为 375.33

这似乎是一个很小的差异，但我有一个应用程序的侧滚动部分，并且在几次滚动之后（按设备宽度），很明显对齐偏离了几个像素，并且每次滚动都会变得更糟。我只能将此归因于我一次滚动 375px 但我需要以 375.33px 滚动（当我手动考虑差异时它可以正常工作）

更糟糕的是，我在另一台机器上尝试了完全相同的代码，并且测量结果是正确的。

我在这里摸不着头脑，希望能得到任何帮助

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

window.innerWidth用于查找

浏览器窗口视口的宽度（以像素为单位），包括垂直滚动条（如果已渲染）。

(Source)

$(window).width() 是一种方法

// 返回浏览器视口的宽度

(Source)

后者不包括滚动条的宽度作为视口宽度的一部分（我在 chrome 的开发工具中使用了这个页面并得到了 window.innerWidth = 1920 和 $(window).width() = 1899，区别在于滚动条的 21px）。我的猜测是，出于某种原因，您在移动网站上的滚动条有一个额外的0.33px。我会检查您显示/样式的方式，因为这可能会增加宽度并导致0.33px 的差异。希望这会有所帮助，如果您可以发布任何对调试也更有帮助的代码。

【讨论】：

我打算添加一个小提琴，但考虑到我的代码正在尝试使用大众汽车，并且该问题仅在模拟 iphone6 屏幕尺寸时才会出现，它将直接应用。另外，我已经在多台计算机上测试过代码，但到目前为止它只发生在 1