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

JavaScriptのscreen・devicePixelRatioを使ってディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を表示する方法をご紹介します。
ブラウザサイズでは無く現在使用してる端末のディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を表示します。

Contents

ディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を表示すCSSの記述
ディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）出力先HTMLの記述
screen、devicePixelRatioを使って「色深度、幅、高さ、解像度、Retina Displayかどうか」を出力するJavaScript処理
ディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を表示するデモ【screen、devicePixelRatio】ページ

ディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）を表示す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>

ディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）出力先HTMLの記述

※ディスプレイ情報（色深度、幅、高さ、解像度、Retina Displayかどうか）の出力先（id=”colordepth”、id=”wd”、id=”ht”、id=”devicepixelratio”、id=”retinadisp”）HTMLタグです。

<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>

screen、devicePixelRatioを使って「色深度、幅、高さ、解像度、Retina Displayかどうか」を出力する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>