Javascript window.innerWidth 与 document.documentElement.clientWidth

window.innerWidth vs document.documentElement.clientWidth

提问by Pacerier

Regarding window.innerWidthand document.documentElement.clientWidth,

关于window.innerWidth和document.documentElement.clientWidth,

1. Webkit (Chrome / Safari) claims innerWidthis smaller than clientWidth.

2. Trident and Presto claim innerWidthis bigger than clientWidth.

3. Gecko claims innerWidthis the same size as clientWidth.

1. Webkit（Chrome / Safari）声称innerWidth小于clientWidth.

2. Trident 和 Presto 声称innerWidth比clientWidth.

3. Gecko 声称innerWidth与clientWidth.

What is the correctbehavior stated byW3C (or silimar "authority")?

W3C（或 silimar“权威”）声明的正确行为是什么？

Test Script (on JSFiddle) (on GoogleHost):

测试脚本（在 JSFiddle 上）（在GoogleHost 上）：

setInterval(function() {
  var inner_w = window.innerWidth;
  var inner_h = window.innerHeight;
  var client_w = document.documentElement.clientWidth;
  var client_h = document.documentElement.clientHeight;
  var debug_msg = "inner: " + inner_w + "-" + inner_h + "<br>client: " + client_w + "-" + client_h;
  document.getElementById("d").innerHTML = debug_msg;
  document.title = debug_msg;
  document.body.style.background = (client_w === inner_w && client_h === inner_h ? "green" : "red");
}, 60);

<div id="d"></div>

(Run the snippet in full page modeand un-maximize or "restore" the window. Observe debug_msgwhile dragging the edge of the window to resize it.)

（在整页模式下运行代码段并取消最大化或“恢复”窗口。debug_msg在拖动窗口边缘以调整其大小的同时观察。）

回答by approxiblue

According to the W3C specification(17 March 2016):

根据 W3C规范（2016 年 3 月 17 日）：

The innerWidthattribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.

...

The clientWidthattribute must run these steps:

1. If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.
2. If the element is the root element and the element's document is not in quirks mode, or if the element is the HTML body element and the element's document is in quirks mode, return the viewport width excluding the size of a rendered scroll bar (if any).
3. Return the width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.

所述innerWidth属性必须返回视口宽度包括呈现滚动条的尺寸（如果有的话），或零，如果没有视口。

...

该clientWidth属性必须执行这些步骤：

1. 如果元素没有关联的 CSS 布局框或者 CSS 布局框是内联的，则返回零。
2. 如果该元素是根元素并且该元素的文档未处于 quirks 模式，或者如果该元素是 HTML body 元素并且该元素的文档处于 quirks 模式，则返回不包括渲染滚动条大小的视口宽度（如果有） ）。
3. 返回填充边缘的宽度，不包括填充边缘和边框边缘之间任何渲染滚动条的宽度，忽略应用于元素及其祖先的任何变换。

回答by mrgoos

I am using this:

我正在使用这个：

    window.innerWidth && document.documentElement.clientWidth ? 
Math.min(window.innerWidth, document.documentElement.clientWidth) : 
window.innerWidth || 
document.documentElement.clientWidth || 
document.getElementsByTagName('body')[0].clientWidth;

It covers cases where the scrollbar is not taken into consideration and has mobile support.

它涵盖了不考虑滚动条并具有移动支持的情况。