閲覧中のスクリーン、ウインドウサイズを表示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ブラウザスクリーン、ウインドウサイズを取得する</title>
</head>
<body>
<div id="ScreenWindowSize"></div>
<script language="JavaScript">
window.onorientationchange = SWSizeInfo;
SWSizeInfo();
function SWSizeInfo(){
 document.getElementById("ScreenWindowSize")
 .innerHTML =
 "スクリーンの幅 = " + screen.width + " px<br />" +
 "スクリーンの高さ = " + screen.height + " px<br />" +
 "ウインドウの幅 = " + window.innerWidth + " px<br />" +
 "ウインドウの高さ = "　+ window.innerHeight + " px";
}
if (window.innerWidth > window.innerHeight) {
 alert("横向き");
}else{
 alert("縦向き");
}
</script>
</body>
</html>

WindowsPC上のGoogle Chromeの場合

WindowsPC上のMSIE10の場合

iPhone５の横置きの場合

iPhone５の縦置きの場合

iPad mini 横置きの場合

iPad mine 縦置きの場合

WindowsPCの場合にはスクリーン幅、ウインドウ幅とも予測通りの値になりますが、iPhone、iPadの場合には縦置き横置きともスクリーン幅は同じ、ウインドウ幅は縦置きが980px、横置きが981px。ウインドウ高さは置き方ごとに独自に決まっているようで、縦置きと横置きの相関性を見つけることはできません。
しかし、スマートフォン用サイト開発の定石であるViewportをdivice-widthにしたり、ウインドウの拡大をしないようにする以下の記述を追加すると

<meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=1, initial-scale=1">

ウインドウのサイズに相関性が現れます。

iPhone５の横置きの場合

iPhone５の縦置きの場合

iPad mini 横置きの場合

iPad mine 縦置きの場合

iPhone縦、横、iPad縦、横の順でウインドウの幅が増える関係にあり、ウインドウの高さは幅に対する関係性を持っているように見える。そこでレスポンシブデザインでWebサイトを作る場合の閾値は500、700当たりを使うと良いと思われます。

閲覧中のスクリーン、ウインドウサイズを表示します。

カテゴリー