JavaScriptによる解像度取得に関するメモ

作成日: 2025/6/20

Firefoxでwindow.screen.widthしたときの値はCSSピクセルに関連した調べ物のメモ。職場にあったWindowsのノートPCで調べた際のメモ。

Windowsで，設定＞システム＞ディスプレイと進むと「ディスプレイの解像度」と「拡大/縮小」から設定が変えられる。現在，買ったときから変えておらず，1920 × 1080と150%になっている。この状態でブラウザのコンソールから画面解像度を取得してみた結果はブラウザ間で違いはなかった。

Firefox / Chrome / Edge

window.screen.width: 1280

window.screen.height: 720

window.devicePixelRatio: 1.5

ちなみに，この状態でブラウザ内のZoomを200%まであげると以下のように値も変わった。

Chrome / Edge

window.screen.width: 1280

window.screen.height: 720

window.devicePixelRatio: 3

Firefox

window.screen.width: 640

window.screen.height: 360

window.devicePixelRatio: 3

Firefoxではブラウザの機能によるZoomがwindow.screenの幅と高さに影響を及ぼすが，ChromeやEdgeではdevicePixelRatioのみに影響を与えていた。