JavaScript

JavaScriptを使ってディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を表示【screen、devicePixelRatio】

  /

Web開発をしていると、画面の情報を取得したい場面に出くわすことがあるかもしれません。特に、デバイスが表示しているディスプレイの詳細な情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を把握することは、レスポンシブデザインや高解像度ディスプレイ向けの対応をする際に重要です。

今回は、JavaScriptを使って、ユーザーが使用しているディスプレイの詳細な情報を取得し、表示する方法を紹介します。この記事では、screenオブジェクトとdevicePixelRatioプロパティを活用して、色深度や画面の解像度などの情報をブラウザ上で取得する方法をわかりやすく解説していきます。

Contents

ディスプレイ情報の表示方法

まず、ユーザーのディスプレイに関する情報をどのように表示するかを説明します。具体的には、色深度、画面の幅、高さ、解像度、そしてRetina Displayかどうかを確認する方法です。

色深度とは？

色深度とは、ディスプレイが1つのピクセルで何種類の色を表示できるかを示す指標です。一般的なコンピュータディスプレイでは、24ビットの色深度が主流で、約1677万色を表示できます。色深度が高いほど、より鮮明で滑らかなグラデーションを表示することが可能です。

画面の幅と高さ

画面の幅と高さは、ピクセル単位で測定されます。ディスプレイが表示できる領域の大きさを理解するためには、これらの数値が重要です。特に、デバイスがスマートフォンなのかタブレットなのかを判断する際に役立ちます。

解像度とRetina Display

devicePixelRatioは、物理的なピクセル数とCSSピクセル数の比率を示します。一般的に、Retina Displayのような高解像度ディスプレイでは、devicePixelRatioの値が2以上になります。これにより、より詳細でシャープな表示が可能になります。

ディスプレイ情報を表示するためのCSS

HTMLとJavaScriptを使ってディスプレイ情報を表示するために、CSSも用意しておく必要があります。以下は、ページ全体のスタイルを整えるための基本的なCSSです。デザインをカスタマイズしたい場合は、自由に変更できます。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.4em;
}
</style>

このCSSを適用することで、ディスプレイ情報が見やすく表示されます。

ディスプレイ情報の出力先HTML

次に、ディスプレイ情報の出力先となるHTML要素を用意します。各ディスプレイ情報を表示するために、id属性を使用して、JavaScriptが情報を挿入する場所を指定します。

<h1>利用端末のディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を以下に表示します。</h1>
<br>

色深度：<span id="colordepth"></span>ビット<br>
幅：<span id="wd"></span>px<br>
高さ：<span id="ht"></span>px<br>
解像度：<span id="devicepixelratio"></span>dp<br>
<span id="retinadisp"></span>

上記のコードでは、JavaScriptで取得したディスプレイ情報が適切に挿入されるよう、id=”colordepth”, id=”wd”, id=”ht”, id=”devicepixelratio”, id=”retinadisp”の各要素を指定しています。

ディスプレイ情報を取得するJavaScript

それでは、JavaScriptを使ってディスプレイ情報を実際に取得してみましょう。以下は、screenオブジェクトとdevicePixelRatioを使用して、色深度、画面の幅、高さ、解像度、およびRetina Displayの判別を行うコードです。

<script type="text/javascript">
  document.getElementById("colordepth").textContent = screen.colorDepth;
  document.getElementById("wd").textContent = screen.width;
  document.getElementById("ht").textContent = screen.height;
  var dp = window.devicePixelRatio;

  document.getElementById("devicepixelratio").textContent = dp;
  if(dp>=2){
    document.write("<br>Retina Displayです");
    document.getElementById("retinadisp").textContent = "Retina Displayです";
  }else{
    document.getElementById("retinadisp").textContent = "Retina Displayでは無いです";
  }
</script>

このコードは、screenオブジェクトのプロパティを利用して、ディスプレイの色深度や幅、高さを取得し、さらにwindow.devicePixelRatioを使ってディスプレイの解像度を確認しています。devicePixelRatioが2以上であれば、「Retina Displayです」と表示され、それ以外の場合は「Retina Displayではありません」と表示されます。

ディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を表示するデモ【screen、devicePixelRatio】ページ

上記で紹介したコードを使って、実際にディスプレイ情報を表示するデモページを作成してみましょう。以下のリンクをクリックすると、デモページが開きますので、自分のディスプレイ情報を確認することができます。

ディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を表示するデモ【screen、devicePixelRatio】

まとめ

今回の記事では、JavaScriptのscreenオブジェクトとdevicePixelRatioを使用して、ディスプレイの詳細情報を取得し、表示する方法について解説しました。特に、Retina Displayの判別方法や、色深度・画面サイズの取得がどのように行われるかを理解することは、Web開発において非常に役立ちます。

ディスプレイの情報を正確に把握し、最適なデザインやレイアウトを提供するためには、今回紹介した技術を活用することが重要です。ぜひ、実際のプロジェクトや学習に活かしてみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

ディスプレイ情報 screen
関連記事