モバイル端末のブラウザ画面サイズとMedia Queries

Androidの画面サイズがピンキリ過ぎてカッとなったので真面目に調べてみた。
調べついでにメディアクエリーも書いてみた。

下に調べた各端末のサイズを表で晒してるんですけど、
端末サイズが小さくてもブラウザで拾えるwindow.innerサイズは大きいので
AndroidスマホのFWVGA以下とqHD〜HD、iPhone、iPhone5、タブレット
という具合にざっくりグループ分けできるようでした。

landscapeは単純に値が逆になるのかというとそうではなく、
特にiPhoneの場合にはメニューバーのサイズが変わるのでheightが微妙に変わります。

アスペクト比がはiPhoneが3:2でAndroid端末は16:9、
タブレット端末の場合はiPadは4:3でAndroid端末は16:10

  • viewport で width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0 を指定した場合の window.innerWidth x window.innerHeight のサイズ
  • iPhoneは実機、Androidで実機ないものはエミュレータ(manymo)を使用
  • 計測ページ
  • width x height
  • 単位はすべてpx
  • iPhoneのアドレスバーは60px
    Androidは52px(黒いの)か56px(白いの)
スマートフォン
デバイスサイズ outerWidth x outerHeight アドレスバーあり アドレスバーなし
640×960(iPhone) 320×356 [P]320×356
[L]480×208
[P]320×416
[L]480×268
640×1136(iPhone5) 320×444 [P]320×444
[L]568×208
[P]320×504
[L]568×268
720×1280(HD) 720×1134
720×1230(F-10D)
360×515
360×563(F-10D)
360×567
360×615(F-10D)
540×960(qHD) 540×922
540×850(SO-05D)
360×563
360×567(SO-05D)
360×615
360×567(SO-05D)
480×854(FWVGA) 480×816 320×492
320×488(P-07C)
320×544
480×800(VGA) 480×762 320×456
320×452(SC-02B)
320×508
320×480 320×455 320×403 320×455
240×432 240×413 320×499 320×551
240×400 240×381 320×456 320×508
タブレット
デバイスサイズ outerWidth x outerHeight アドレスバーあり アドレスバーなし
800×1280 800×1044 [P]601×784
[L]1241×622
[P]null
[L]1241×671
1024×600 1024×471 [L]1024×423 [L]1024×471
600×800 762×600 [P]400×453 [P]400×508
480×640 480×615 [P]480×561 [P]480×615

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください