document.documentElement.clientWidth - 返回错误值答案

【问题标题】：document.documentElement.clientWidth - returns wrong valuedocument.documentElement.clientWidth - 返回错误值
【发布时间】：2020-05-27 19:55:31
【问题描述】：

我尝试读取当前窗口宽度。目前在 chrome 开发者工具中设置为 768。

但是如果我在控制台中调用document.documentElement.clientWidth，那么我会得到758。

对建议答案的回答：不，jquery 也没有解决它。如果我打电话给$(window).width();，那么我也会得到758。如果我打电话给$(document).width();，我会得到992

【问题讨论】：

这能回答你的问题吗？ clientHeight/clientWidth returning different values on different browsers
不，jquery 也没有解决它。如果我打电话给$(window).width()，我也会得到758。如果我打电话给$(document).width();，我会得到992

标签： javascript jquery html css google-chrome

【解决方案1】：

MDN states那个

对于内联元素和没有 CSS 的元素，Element.clientWidth 属性为零；否则，它是以像素为单位的元素的内部宽度。它包括内边距，但不包括边框、边距和垂直滚动条（如果存在）。

我在您的屏幕截图上看到了一个滚动条。也许是这个原因？

【讨论】：

你是对的！我有一个正好 10px 宽的滚动条，这确实是原因。谢谢。

【解决方案2】：

Curveball 为我指明了正确的方向。我确实在使用宽度为 10px 的自定义滚动条，调用 document.documentElement.clientWidth 时会减去该滚动条。

/* Scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
  }

我解决了这个问题：

window.innerWidth;    // output: 768

【讨论】：