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

debugcn 投稿 Dev

Amr Elgarhy：

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

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

javascript:alert(document.body.offsetWidth);

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

他にもっと良い機能や回避策はありますか？

トラヴィス：

2017年の更新

私の元の回答は2009年に書かれました。それでも動作しますが、2017年に更新したいと思います。ブラウザーの動作は異なる場合があります。私はjQueryチームがブラウザ間の一貫性を維持する上で素晴らしい仕事をすることを信頼しています。ただし、ライブラリ全体を含める必要はありません。jQueryソースの関連部分は、dimension.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ます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-04-2

コメントを追加

サインイン

分類Dev

Related 関連記事

記事