ディスプレイのピクセル比取得

スマートフォンやタブレットでは デバイスピクセル比が2や3の機種がある。そのPixel数をWebで取得する方法のメモ。

console.log(window.devicePixelRatio);

出力はそのデバイスのPixel比(1,2,3)がでる。
画面の座標を取得するときや<canvas>タグで描画するとき、ピクセル比が違うと、正しく動作しないことがあるので、どのデバイスでも正常に動作させるときに使用する。

  if (window.devicePixelRatio === 1) {
    // デバイス比が1の時の処理
  } else if (window.devicePixelRatio === 2) {
    // デバイス比が2の時の処理
  } else if (window.devicePixelRatio === 3) {
    // デバイス比が3の時の処理
  }

参考