window.innerWidth document.documentElement.clientWidth

Question

対、（クローム/サファリ）はinnerWidthを主張

1. WebKitがclientWidthよりも小さくなっています。トライデントおよびプレスト請求の範囲innerWidthは、clientWidthよりも大きい。

2. ゲッコーのクレーム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属性は、次の手順を実行する必要があります。要素は全く関連したCSSレイアウトのボックスを持っていない場合、またはCSSレイアウトボックスがインラインの場合はゼロを返し、

1. を。
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; 

それは、スクロールバーを考慮して、モバイルをサポートしていない場合をカバーしています。