項目名 | 値 |
デバイス解像度(物理) | |
デバイス解像度(論理) | |
window.devicePixelRatio |
項目名 | 値 |
window.outerWidth/Height | |
window.innerWidth/Height | |
window.screen.Width/Height | |
window.screen.availWidth/Height |
項目名 | 値 |
screenX/Y | |
clientX/Y | |
pageX/Y | |
offsetX/Y |
項目名 | 値 |
screenX/Y | |
clientX/Y | |
pageX/Y | |
radiusX/Y |
ビューポートについて
-
HTMLにビューポートのおまじない <meta name="viewport" content="width=device-width, initial-scale=1.0" /> を設定すると、横幅が論理的なWidthになる。
PCでは無効。 - 上記ビューポートのメタタグ設定をしない場合、横幅はデフォルトの980pxになる。(物理的な解像度のWidthになるわけではない。)
- Android端末ではブラウザで「デスクトップサイトを表示」にすると、ビューポートの設定を無視した挙動になるっぽい。(メタタグを設定していないか、width=980を設定したような挙動になる)
- ビューポートの横幅に、論理的な横幅以上の値が設定されるとき、outerWidthよりもinnerWidthのほうが大きくなる。
-
PCで表示倍率を変更すると、デバイスピクセル比も変わる。
SPで拡大表示(ピンチアウト)しても変わらない。