現在Webサイトはレスポンシブデザインが主流となってきました。そして、ユーザー側も様々な端末での閲覧を行っています。
Web制作側としては各種端末での表示チェックは必須となってきましたが、各端末でのチェックはどこまですればいいのか・・・悩みどころですね。
チェック方法はいろいろありますが、今回私が使用した方法を紹介します。
Window Resizer
Google Chrome の拡張機能でchromeウェブストアで無料でインストールが出来ます。
インストールが完了すると、ツールバー右側にWindow Resizerのボタンが表示されます。
このボタンをクリックすると、PC ・タブレット・スマホなど各デバイスでの表示がチェック出来ます。
（IE・Firefox・Safari・Operaなどのブラウザでは利用できないのでご注意下さい。）
デフォルトで主なデバイスサイズは入っていますが、設定で確認したいデバイスサイズを入力する事も可能となっています。
ここが優れものですね！
下記は主なデバイスのサイズです。
主なiPhoneのブラウザサイズ一覧
| 機 種 | ブラウザサイズ | デバイスサイズ |
|---|---|---|
| iphone8 Plus | 414 × 736 | 1080 × 1920 |
| iphone8 | 375 × 667 | 750 × 1134 |
| iphone7 Plus | 414 × 736 | 1080 × 1920 |
| iphone7 | 375 × 667 | 750 × 1134 |
| iphone6s Plus | 414 × 736 | 1080 × 1920 |
| iphone6s | 375 × 667 | 750 × 1134 |
| iphone6 Plus | 414 × 736 | 1080 × 1920 |
| iphone6 | 375 × 667 | 750 × 1134 |
| iphone5s | 320 × 568 | 640 × 1136 |
| iphone5c | 320 × 568 | 640 × 1136 |
| iphone5 | 320 × 568 | 640 × 1136 |
主なiPadのブラウザサイズ一覧
| 機 種 | ブラウザサイズ | デバイスサイズ |
|---|---|---|
| iPad | 768 × 1024 | 768 × 1024 |
| iPad mini | 768 × 1024 | 768 × 1024 |
| iPad Air | 768 × 1024 | 1536 × 2048 |
| iPad pro | 1024 × 1366 | 2048 × 2732 |
以上はChromeでの表示確認ですので、これでOKだったとしても、IE・Firefoxでは表示崩れしている場合もありますのでご注意を！