現在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では表示崩れしている場合もありますのでご注意を!
営業対象エリア
関東1都6県(東京都、神奈川県、千葉県、埼玉県、群馬県、栃木県、茨城県)
最近の投稿
カテゴリー
- Dynamics
- Exif
- Googleフォト
- ITツール
- IT導入支援事業者
- IT補助金
- News
- OS
- PCセットアップ
- SEO
- Windows10
- WordPress
- アクセシビリティ
- ウィルスメール対策
- コラム
- セキュリティ
- セキュリティシステム
- トラブル対応
- ホームページ作成
- ホームページ制作
- ホームページ関連
- モバイルファースト
- リハビリ実績管理
- レスポンシブ
- 中小企業庁
- 信用金庫
- 写真データ保存
- 医療
- 医療システム
- 商品
- 商品案内
- 商工会
- 地域包括ケアシステム
- 小規模事業者持続化補助金
- 展示会
- 新商品
- 望星丸
- 東海大学
- 気象
- 災害対策
- 登山
- 看護必要度
- 船舶
- 補助金
- 製品情報
- 遭難救助
- 開発情報
- 電子カルテ