CSSピクセル、デバイスピクセル、デバイスピクセル比を調べる確認ツール

HTML/CSS/JavaScript

2021.07.022021.07.04

今お使いのデバイスの情報です。

上の青枠部分は、JavaScriptで情報を取得しています。
パソコンの場合は、画面幅を変更したり、拡大率を変更したりすると、リアルタイムで数値が変更されます。
デバイスピクセルは、実端末の解像度のことです。
- 例えばiPhoneXのデバイスピクセルは1125x2436です。
- JavaScriptでは window.innerWidth × window.devicePixelRatioで取得できます。
デバイスピクセル比は、○x○ピクセルを1ピクセルで表したときの比率のことです。
- 例えば、iPhoneXのデバイスピクセル比は3.5です。
- JavaScriptではwindow.devicePixelRatioで取得できます。
CSSピクセルは、デバイスピクセル比を考慮した解像度のことです。
- 例えば、iPhoneXのCSSピクセルは375x812です。
- JavaScriptでは window.innerWidth で取得できます。

このページのソースコードは以下のとおりです。

const fetchSize = () => {
  const cssPixcel = `CSSピクセル：<span>${window.innerWidth}</span>px × <span>${window.innerHeight}</span>px<br>`;
  const devicePicel = `デバイスピクセル：<span>${
    window.innerWidth * window.devicePixelRatio
  }</span>px × <span>${
    window.innerHeight * window.devicePixelRatio
  }</span>px<br>`;
  const devicePixelRatio = `デバイスピクセル比：<span>${window.devicePixelRatio}</span>`;

  window.document.querySelector(".target").innerHTML =
    cssPixcel + devicePicel + devicePixelRatio;
};
window.addEventListener("resize", function (e) {
  fetchSize();
});
fetchSize();

ブログへ