<!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当たりを使うと良いと思われます。
