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】
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告
ディスプレイ広告