最終更新日：
公開日：
レシピ
ブラウザ
端末のピクセル比を取得する
ブラウザを表示している端末のピクセル比を取得する方法について解説します。
この記事のポイント
- ブラウザを表示する端末が高解像度かどうか分かる
- 端末の解像度によって処理を分ける
端末が高解像度か判定する
windowオブジェクトのdevicePixelRatioプロパティはブラウザを表示している端末のピクセル比を取得することができます。
このプロパティの値が1だと通常の解像度、2だと高解像度となります。
例えば、RatinaディスプレイのMacbookなどでdevicePixelRatioプロパティの値を出力すると次のように2が出力されます。
通常の解像度の端末と高解像度の端末で処理を分けたい場合は、次のようにdevicePixelRatioプロパティの値を使って条件分岐をします。
また、windowオブジェクトはグローバル変数として宣言されているため「window.devicePixelRatio」の「window」は省略することも可能です。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS Test</title>
<script>
window.addEventListener('load', (event) => {
// var pixelratio = devicePixelRatio; と書くことも可
var pixelratio = window.devicePixelRatio;
if( pixelratio === 1 ) {
// 通常の解像度
console.log("通常の解像度");
} else {
// 高解像度
console.log("高解像度");
}
});
</script>
</head>
<body>
<h1>JS Test</h1>
</body>
</html>このコードは実行する端末の解像度によって出力が変わります。