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

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

 

 

  • 上の青枠部分は、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();

 

ブログへ

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました