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 |