web-dev-qa-db-ja.com

JavaScriptでブラウザのビューポートの寸法を取得する

訪問者に高品質の画像を表示する機能を提供したいのですが、ウィンドウサイズを検出する方法はありますか。

それとももっと良いのは、JavaScript搭載のブラウザのビューポートサイズは？ここの緑地を見なさい：

javascriptcross-browserviewport
678
Alix Axel

クロスブラウザ @media (width) および @media (height) 値

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidthおよび.innerHeight

  • CSSビューポート スクロールバーを含む@media (width)および@media (height)を取得します
  • initial-scaleおよびズーム バリエーション は、モバイル値を 間違って PPKが visual viewport と呼ぶものに縮小し、@media値よりも小さくする
  • ズームにより、ネイティブの丸めにより値が1ピクセルオフになる場合があります
  • IE8のundefined

document.documentElement.clientWidthおよび.clientHeight

資源

1186
ryanve

jQueryディメンション関数

$(window).width()と$(window).height()

106
Scott Evernden

window.innerWidth および window.innerHeight プロパティを使用できます。

innerHeight vs outerHeight

69
CMS

あなたがjQueryを使用していない場合、それは醜くなります。これがすべての新しいブラウザで動作するはずのスニペットです。動作は、IEのQuirksモードと標準モードで異なります。これはそれの面倒を見る。

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;
31
Chetan Sastry

これには受け入れられる答えがあることはわかっていますが、iPhone（少なくとも私の場合）が320ではなく980を返したため、clientWidthが機能しない状況に陥ったので、window.screen.widthを使用しました。私は既存のサイトで作業していたため、「レスポンシブ」になり、より大きなブラウザで別のメタビューポートを使用する必要がありました。

これが誰かを助けることを願っています、それは完璧ではないかもしれませんが、iOとAndroidでの私のテストではうまくいきます。

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);
12
Jazzy

私はJavaScriptで最も確実な答えを見つけることができました：The Definitive Guide、第6版、O'Reilly著、p。 391：

このソリューションはQuirksモードでも機能しますが、ryanveとScottEverndenの現在のソリューションでは機能しません。

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

if (document.compatMode == "CSS1Compat")という行がif (d.compatMode == "CSS1Compat")ではないのはなぜだろう、ということ以外は、すべてうまくいきます。

11
太極者無極而生

私はクロスブラウザの方法を見て見つけました：

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>
10
user2921779

window.innerHeightとdocument.documentElement.clientHeightには違いがあります。 1つ目は水平スクロールバーの高さです。

9
Szépe Viktor

このコードは http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/からです。 /

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

注意：幅を読むにはconsole.log('viewport width'+viewport().width);を使います

9
Xavier Blondel

モバイルの仮想ピクセルに正しい値を与える非jQueryソリューションを探している場合、プレーンwindow.innerHeightまたはdocument.documentElement.clientHeightは問題を解決できます。まずこのリンクを調べてください： https://tripleodeon.com/assets/2011/12/table.html

開発者は問題を明らかにする適切なテストを実施しました。Android/ iOS、ランドスケープ/ポートレート、通常/高密度ディスプレイの予期しない値を取得できます。

私の現在の答えはまだ特効薬（// todo）ではなく、このスレッドから本番コードに特定のソリューションをすばやくコピーアンドペーストしようとしている人への警告です。

モバイルではvirtual pixelsでページ幅を探していましたが、動作するコードは（予想外に！）window.outerWidthだけです。時間があれば、ナビゲーションバーを除く高さを与える正しい解決策についてこの表を後で調べます。

8
Dan

W3C標準に準拠する解決策は、透明なdivを（たとえばJavaScriptで動的に）作成し、その幅と高さを100vw/100vh（ビューポート単位）に設定してから、そのoffsetWidthとoffsetHeightを取得することです。その後、要素を再び削除することができます。ビューポートユニットは比較的新しいため、これは古いブラウザでは機能しませんが、それらを気にしなくても代わりに（間もなく）標準を使用するのであれば、間違いなく次のようにします。

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

もちろん、objNode.style.position = "fixed"と設定してから、幅/高さとして100％を使用することもできます。これは同じ効果があり、互換性がある程度向上します。また、位置を固定に設定することは一般的には良い考えかもしれません。そうでなければdivは見えないがスペースをいくらか消費してしまい、スクロールバーが現れるなどの原因となるでしょう。

6
Firefall

これが私のやり方です、私はIE 8 - > 10、FF 35、Chrome 40で試しました、それはすべての最近のブラウザ（window.innerWidthが定義されているように）でとてもスムーズに動きますIE 8（window.innerWidthなし）それは同様にスムーズに動作します、どんな問題でも（オーバーフローのための点滅のような： "hidden"）、それを報告してください。私はビューポートの高さにはあまり興味を持っていません。応答性の高いツールを回避するためだけにこの関数を作成しましたが、実装されている可能性があります。それが役立つことを願って、私はコメントや提案を感謝します。

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (Elm) {
    if (!Elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = Elm.style, oldValue = setOverflow(style, "hidden"), width = Elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}
3
manolinjr81