web-dev-qa-db-ja.com

JavaScriptで画面の解像度を検出する方法

すべてのブラウザで機能する方法はありますか？

javascriptscreen-resolution
169
iceorangeblue

元の答え

はい。

window.screen.availHeight
window.screen.availWidth

更新2017-11-10

コメント中 Tsunamis より：

モバイルデバイスなどのネイティブ解像度を取得するには、デバイスのピクセル比（window.screen.width * window.devicePixelRatioおよびwindow.screen.height * window.devicePixelRatio）を乗算する必要があります。これはデスクトップでも動作します。デスクトップの比率は1になります。

そして Ben から、別の答えでは：

Vanilla JavaScriptでは、これはあなたに利用可能な幅/高さを与えるでしょう：

window.screen.availHeight
window.screen.availWidth

絶対幅/高さには、次のようにします。

window.screen.height
window.screen.width
261
John Weldon
var width = screen.width;
var height = screen.height;
49
Alessandro

Vanilla JavaScriptでは、これによりAVAILABLE幅/高さが得られます。

window.screen.availHeight
window.screen.availWidth

絶対幅/高さには、次のようにします。

window.screen.height
window.screen.width

上記の両方ともウィンドウの接頭辞なしで書くことができます。

JQueryが好きですか？これはすべてのブラウザで機能しますが、ブラウザごとに値が異なります。

$(window).width()
$(window).height()
33
Ben

あなたは、ディスプレイの解像度（例えば、72ドット/インチ）またはピクセル寸法（ブラウザウィンドウは現在1000 x 800ピクセルです）を意味しますか？

画面の解像度によって、10ピクセル行のインチ単位の太さを知ることができます。ピクセルサイズは、利用可能な画面の高さの何パーセントが10ピクセル幅の水平線で占められるかを示します。

Javascriptだけでディスプレイの解像度を知る方法はありません。コンピュータ自体は通常、画面の実際のサイズ、ピクセル数だけを知らないからです。 72 dpiは通常の推測です....

ディスプレイの解像度については多くの混乱があり、多くの場合、ピクセル解像度の代わりにこの用語を使用しますが、この2つはまったく異なります。 Wikipedia を参照してください

もちろん、cmあたりのドット数で解像度を測定することもできます。非正方形ドットの不明瞭な問題もあります。しかし、私は話します。

19
Larry K

JQueryを使うと、次のことができます。

$(window).width()
$(window).height()
19
chaim.dev

ブラウザのツールバーを避けて、ウィンドウの幅と高さを取得することもできます（画面サイズだけではありません）。

これを行うには、window.innerWidthおよびwindow.innerHeightプロパティを使用します。 w3schoolsで参照 。

ほとんどの場合、たとえば、完全に中央揃えのフローティングモーダルダイアログを表示するのが最善の方法です。どの解像度の向きやウィンドウサイズがブラウザを使用していても、ウィンドウ上の位置を計算できます。

15
serfer2

モバイルデバイスでこれを取得しようとすると、さらにいくつかの手順が必要になります。 screen.availWidthは、デバイスの向きに関係なく同じままです。

これが私のモバイルソリューションです。

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};
12
posit labs

Javascriptを使用してモニター画面の解像度を取得する および window.screenオブジェクト を参照してください。

8
cletus
function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}
4
Anabar

将来の参考のために：

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}
3
daniel

画面の解像度を検出したい場合は、プラグイン res をチェックアウトすることをお勧めします。それはあなたが以下をすることを可能にします：

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

これが、プラグインの作者であるRyan Van Ettenによるすばらしい 解決策 です。

  • 2つのユニットセットが存在し、一定の規模で異なります。デバイスユニットとCSSユニットです。
  • 解像度は、特定のCSSの長さに合わせることができるドット数として計算されます。
  • 単位変換：１ｉｎ ＝ ２．５４ｃｍ ＝ ９６ｐｘ ＝ ７２ｐｔ
  • CSSには相対的な長さと絶対的な長さがあります。通常のズームでは、次のようになる。
  • dppxはdevice-pixel-ratioと同じです。
  • devicePixelRatioの定義はプラットフォームによって異なります。
  • メディアクエリは最小解像度をターゲットにすることができます。スピードに気をつけて使用してください。

これが今日のresのソースコードです。

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});
2
Abram