web-dev-qa-db-ja.com

window.innerWidth vs document.documentElement.clientWidth

window.innerWidthおよびdocument.documentElement.clientWidthに関して、

  1. Webkit（Chrome/Safari）は、innerWidthがclientWidthよりも小さいと主張しています。

  2. TridentとPrestoは、innerWidthがclientWidthよりも大きいと主張しています。

  3. Geckoは、innerWidthがclientWidthと同じサイズであると主張しています。

correctbehaviorstatedW3C（またはsilimar "authority"）とは何ですか？

テストスクリプト（ 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を観察しますサイズを変更します。）

javascripthtmldomstandardsw3c
35
Pacerier

W3Cによると 仕様 （2016年3月17日）：

innerWidth属性は、レンダリングされたスクロールバーのサイズを含むビューポートの幅を返す必要があります。ビューポートではありません。

...

clientWidth属性は次の手順を実行する必要があります。

  1. 要素にCSSレイアウトボックスが関連付けられていない場合、またはCSSレイアウトボックスがインラインの場合、ゼロを返します。
  2. 要素がルート要素であり、要素のドキュメントがQuirksモードでない場合、または要素がHTML body要素であり、要素のドキュメントがQuirksモードである場合、レンダリングされたスクロールバーのサイズを除くビューポートの幅を返します（存在する場合） ）。
  3. 要素とその祖先に適用される変換を無視して、パディングエッジと境界エッジの間のレンダリングされたスクロールバーの幅を除いて、パディングエッジの幅を返します。
29
approxiblue

私はこれを使用しています：

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

スクロールバーが考慮されておらず、モバイルサポートがある場合をカバーします。

16
mrgoos