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;

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