1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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にしたり、ウインドウの拡大をしないようにする以下の記述を追加すると
1 | <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当たりを使うと良いと思われます。