Chrome开发者工具窗口尺寸不一致

Question

当您打开Chrome开发者工具并调整窗口大小时，会在右上角出现一个小白框，告诉您正在调整的窗口的尺寸。我在下面的截图中用一个大绿箭头标记了它。

虽然这是一个非常有用的工具，但我注意到很多时候它的值是意外的，并且与其他元素的宽度不一致。例如，当我在下面的屏幕截图中点击应该是100%宽度的html元素时，Chrome告诉我其宽度为404px，而窗口宽度却是419px。这让我感到困惑。它们为什么不同？这是Chrome的一个bug吗？

- emersonthis

---

一些浏览器包括滚动条和浏览器“chrome”宽度，而有些则不包括，据我所记。 - Paulie_D

@Paulie_D 这可能解释了Chrome显示的宽度与其他浏览器之间的差异，但我描述的是同一Chrome窗口中两个元素之间的差异。您是否在暗示Chrome开发工具在某些宽度中包括滚动条而在其他宽度中不包括？ - emersonthis

这样的滚动条并不是HTML的一部分，但它们确实计入视口大小（带箭头的数字）...我同意这是一个好奇点。 - Paulie_D

有趣。这个理论得到了支持，因为差异似乎始终为15像素。听起来像是Chrome垂直滚动条的宽度吗？ - emersonthis

此外，开发工具显示的宽度与使用 $('body').innerWidth() 或 $('body').width() 的 jQuery 显示的宽度不同。 - i_a

Answer 1

提供信息的尺寸数值是 document.documentElement.clientWidth 和 document.documentElement.clientHeight。

Robert 是正确的。请确保缩放比例为100％以获得正确的尺寸。

- Neo

---

ZOOOOOM，这就是我的全部。 - Glen Thompson

谢谢！我还注意到，当缩放比例不是100%时，Chrome现在会在地址栏右侧显示一个放大镜图标。 - Daniel K.

Answer 2

这包括垂直滚动条的宽度。尝试移除滚动条并检查，它会完全匹配。

- Nagaraj .

---

对我来说这不是答案。当我很小的时候，我看到一个20像素的差异（HTML标签宽度较大）。当我扩展浏览器的宽度时，我看到一个200像素的差异。那不是滚动条。对我来说，有大约10%的差异......我在其他地方发现这是由于浏览器缩放设置造成的。 - Robert