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

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

ブラウザサイズでは無く現在使用してる端末のディスプレイ情報(色深度、幅、高さ、解像度、Retina Displayかどうか)を表示します。

CSSの記述

※ここは重要では無いので必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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かどうかの出力先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>

JavaScriptでディスプレイ情報を表示するデモページ

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

 

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