[JavaScript] iPhone4Sなどスマホの画面サイズを正しく取得する方法

[JavaScript] iPhone4Sなどスマホの画面サイズを正しく取得する方法

iPhone4など、スマートフォンの一部では、JavaScriptで画面サイズを取得する際にちょっとしたコツが必要です。
詳細は以下から。

JavaScriptでスマホの画面サイズを取得する方法

通常、JavaScriptで画面サイズを取得する際は『screen.width』で横幅を、『screen.height』で縦幅を取得する事ができます。

<script type="text/javascript">
width_num = screen.width;
height_num = screen.height;
</script>

iPhone4やiPhone4Sの画面サイズは横640px・縦960pxですが、旧機種の3Gや3GSとの兼ね合いからか、screen.widthの値が320、screen.heightの値が480になってしまいます。
この問題を解決するには『window.devicePixelRatio』という値を用います。

<script type="text/javascript">
$(function(){ 
	if(window.devicePixelRatio > 0){
		width_num = screen.width * window.devicePixelRatio;
		height_num = screen.height * window.devicePixelRatio;
	}else{
		width_num = screen.width;
		height_num = screen.height;
	}
	form1.w.value = width_num;
	form1.h.value = height_num;
 });
</script>

<form id="form1" action="search.php" method="get">
横幅：<input type="number" name="w" value="" />px<br />
縦幅：<input type="number" name="h" value="" />px
</form>

『window.devicePixelRatio』が0より大きい値の場合、その値を『screen.width』と『screen.height』にそれぞれ掛けてやることで、正しい横幅と縦幅が取得できます。

関連記事