画面サイズの確認方法
画面のサイズとブラウザの表示領域の違いを、実測値で確認できます。
- ブラウザの表示領域
- innerWidth × innerHeight（CSSピクセル）
- ウィンドウ外寸
- outerWidth × outerHeight（ブラウザ枠を含む）
- 画面サイズ
- screen.width × screen.height（CSSピクセル）
- 利用可能な画面領域
- screen.availWidth × screen.availHeight
- 画素比
- devicePixelRatio
数値はこのページを開いている環境の実測値です。ウィンドウを変更すると更新されます。画面サイズのCSSピクセルとパネルの物理解像度は、OSの拡大率やブラウザのズーム設定によって異なります。
画面のサイズを調べるには
上の「画面サイズ」はブラウザが報告する画面領域です。「ブラウザの表示領域」はWebページを表示する内側の広さで、レスポンシブ表示の確認に使えます。
物理解像度を確認するには
OSのディスプレイ設定で解像度と拡大率を確認してください。Windowsでは「設定」の「システム」から「ディスプレイ」、macOSでは「システム設定」の「ディスプレイ」に表示されます。項目名はOSのバージョンによって異なります。
レイアウトを確認するとき
ウィンドウを横に狭め、文字や操作部分が画面内に収まるかを確認します。スマートフォンの確認は実機でも行い、ウィンドウ幅だけで端末の動作を判断しないでください。