web-dev-qa-db-ja.com

JavaScriptコードを使用してブラウザーの幅を取得する方法は？

現在のブラウザの幅を取得するJavaScript関数を作成しようとしています。

私はこれを見つけました：

javascript:alert(document.body.offsetWidth);

ただし、ボディの幅が100％の場合、失敗するという問題があります。

他に優れた機能や回避策はありますか？

javascriptjqueryhtmlcss
168
Amr Elgarhy

2017年の更新

私の元の答えは2009年に書かれました。それでも動作しますが、2017年にそれを更新したいと思います。ブラウザはまだ異なる振る舞いをすることができます。 jQueryチームは、ブラウザ間の一貫性を維持する上で素晴らしい仕事をすると信じています。ただし、ライブラリ全体を含める必要はありません。 jQueryソースでは、関連部分は dimensions.jsの37行目 にあります。ここで抽出され、スタンドアロンで動作するように変更されます。

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

元の回答

すべてのブラウザの動作は異なるため、最初に値をテストしてから、正しい値を使用する必要があります。これはあなたのためにこれを行う関数です：

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

高さについても同様：

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

getWidth()またはgetHeight()を使用して、スクリプトでこれらの両方を呼び出します。ブラウザのネイティブプロパティが定義されていない場合、undefinedが返されます。

111
Travis

お尻の痛み です。ナンセンスをスキップして jQuery を使用することをお勧めします。これにより、$(window).width()を実行できます。

301
chaos
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

どちらも整数を返し、jQueryを必要としません。クロスブラウザ互換。

JQueryがwidth（）およびheight（）に対して無効な値を返すことがよくあります

46
Bradley Flood

誰もmatchMediaに言及していないのはなぜですか？

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

それほどテストしませんでしたが、Android defaultおよびAndroid chromeブラウザー、デスクトップchromeでテストしましたが、今のところうまく機能しているようです。

もちろん、数値を返すのではなく、ブール値を返します-一致するかどうかによって、質問に完全に適合しない可能性がありますが、とにかくそれは私たちが望み、おそらく質問の著者が望みます。

14
Darius.V

W3schoolsとそのクロスブラウザーからIEの暗黒時代まで！

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>
7
user3651121

上記の関数の短縮版は次のとおりです

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}
6
ismael