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

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

元の答え

はい。

window.screen.availHeight
window.screen.availWidth

アップデート 2017-11-10

コメントの津波から：

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

そしてベンから別の答えで：

バニラJavaScriptでは、これは利用可能な幅/高さを提供します：

window.screen.availHeight
window.screen.availWidth

絶対的な幅/高さについては、以下を使用します。

window.screen.height
window.screen.width

var width = screen.width;
var height = screen.height;

バニラJavaScriptでは、これは利用可能な幅/高さを提供します：

window.screen.availHeight
window.screen.availWidth

絶対的な幅/高さについては、以下を使用します。

window.screen.height
window.screen.width

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

jQueryが好きですか？これはすべてのブラウザーで機能しますが、ブラウザーごとに異なる値を提供します。

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

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

画面の解像度により、10ピクセルのラインのインチ単位の太さがわかります。ピクセル寸法は、使用可能な画面の高さの何パーセントが10ピクセル幅の水平線で占められるかを示します。

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

ディスプレイの解像度については多くの混乱があることに注意してください。多くの場合、ピクセル解像度の代わりにこの用語を使用しますが、2つはまったく異なります。見るウィキペディアを

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

あなたができるjQueryを使用して：

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

また、ウィンドウの幅と高さを取得して、ブラウザのツールバーなどを回避することもできます（画面サイズだけでなく）。

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

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

これをモバイルデバイスで取得するには、さらにいくつかの手順が必要です。 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;
};

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

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;
}

将来の参考のために：

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

画面の解像度を検出したい場合は、プラグインresをチェックアウトできます。次のことを実行できます。

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

プラグインの作者であるRyan Van Ettenからのすばらしい解決策のいくつかを以下に示します。

• 2つのユニットセットが存在し、固定スケールで異なります。デバイスユニットとCSSユニットです。
• 解像度は、特定のCSSの長さに沿って配置できるドットの数として計算されます。
• 単位換算：1⁢in=2.54⁢cm=96⁢px=72⁢pt
• CSSには相対長と絶対長があります。通常のズームの場合：1⁢em=16⁢px
• 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}
});