window.innerWidth vs document.documentElement.clientWidth

Question

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

1. Webkit（Chrome / Safari）声称innerWidth小于clientWidth。
2. Trident和Presto声称innerWidth比clientWidth更大。
3. Gecko声称innerWidth与clientWidth的大小相同。

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

测试脚本（on 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 specification（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;

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