window.innerWidth vs document.documentElement.clientWidth

Question

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

1. Webkit(Chrome/Safari)声称innerWidth小于clientWidth.

2. 三叉戟和普雷斯托的主张innerWidth要大于clientWidth.

3. Gecko声称innerWidth尺寸与clientWidth.

W3C(或silimar"权威")所说的正确行为是什么？

测试脚本(在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>

(以完整页面模式运行代码段并取消最大化或"恢复"窗口.debug_msg在拖动窗口边缘时观察以调整窗口大小.)

Answer 1

根据W3C 规范(2016年3月17日):

所述innerWidth如果没有视属性必须返回视口宽度包括呈现滚动条的尺寸(如果有的话),或零.

...

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

1. 如果元素没有关联的CSS布局框,或者CSS布局框是内联的,则返回零.
2. 如果元素是根元素且元素的文档不处于怪异模式,或者元素是HTML主体元素且元素的文档处于怪异模式,则返回视口宽度,不包括渲染滚动条的大小(如果有) ).
3. 返回填充边缘的宽度,不包括填充边缘和边界边缘之间任何渲染滚动条的宽度,忽略应用于元素及其祖先的任何变换.

Answer 2

我用这个:

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

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