JavaScriptのscreen・devicePixelRatioを使ってディスプレイ情報(色深度、幅、高さ、解像度、Retina Displayかどうか)を表示する方法をご紹介します。
ブラウザサイズでは無く現在使用してる端末のディスプレイ情報(色深度、幅、高さ、解像度、Retina Displayかどうか)を表示します。
Contents
ディスプレイ広告
ディスプレイ情報(色深度、幅、高さ、解像度、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かどうか)の出力先(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>
ディスプレイ情報(色深度、幅、高さ、解像度、Retina Displayかどうか)を表示するデモ【screen、devicePixelRatio】ページ
ディスプレイ情報(色深度、幅、高さ、解像度、Retina Displayかどうか)を表示するデモ【screen、devicePixelRatio】
※流用される場合は自己責任でお願いします。
デモページ