【ホームページ制作】ブラウザの表示確認 ~Window Resizer~



現在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では表示崩れしている場合もありますのでご注意を!