• 2016年10月24日

ホームページをスマホで簡単に確認する方法

ホームページをスマホで簡単に確認する方法

ホームページをスマホで簡単に確認する方法

640 430 パソコン生活サポート Pasonal

現在はスマートフォン全盛時代と言えるかもしれません。

各社、様々なスペックや解像度などのスマートフォンがたくさん発売されています。しかし、Web担当者にとっては、ホームページのスマートフォンへの最適化は避けては通れない道なのです。それぞれ、異なるスマートフォンで『動作検証』『画面確認』などを行う必要があります。

さて、今回は『ホームページをスマホで簡単に確認する方法』をご紹介します。

 

 

Google Chrome デベロッパーツールの活用

Google Chrome デベロッパーツールの活用

スマホで確認したいサイトをGoogle Chromeで表示させておきます。

画面のどこでもいいので、『右クリック』 > 『検証』を選択します。

 

スマホ画面表示

『Ctrl + Shift + M』でスマホ画面を表示させましょう。

 

別のスマホに切り替える

デベロッパーツールの上部メニューから『確認したい機種』を選択します。

これでスマホの画面でホームページを確認できます。

 

 

さらに表示可能なスマホ機種を増やす

editを選択する

デベロッパーツールの上部メニューから『Edit…』を選択します。

 

 

追加するデバイスを選択する

画面右側に表示される設定から『Devices(デバイス)』を選択し、表示させたいスマホ機種にチェックを入れます。

 

 

上部メニューにデバイスが追加される

上部メニューにチェックを付けたデバイスが追加されます。

 

 

さらに機種を追加する場合

さらに機種を追加する場合

リストの中にも表示させたいデバイスが存在しない場合は、『自分で登録する』必要があります。

『Add Custom device』から、『デバイス名』・『ブラウザサイズ(以下参照)』・『Device pixcel ratio(ピクセル比率)』を入力します。

『User agent string(ユーザーエージェント文字列)』は、特に必要ないように思います。

※『User agent string(ユーザーエージェント文字列)』はAndroid 2.xなどの情報のことです。

 

 

PC / スマホ / タブレット画面サイズ表

画面サイズ デバイス ブラウザサイズ(横 x 縦)
HVGA 320 x 480
WVGA 480 x 800
WXGA 640 x 960
XGA iPad 768 x 1280
WXGA タブレット 1366 x 768
WXGA ネットブック 1280 x 800
WXGA ウルトラブック 1366 x 768
SXGA スモールデスクトップ 1280 x 1024
WSXGA デスクトップ / スマホ 1680 x 1050
UXGA デスクトップ / スマホ 1600 x 1200
フルHD デスクトップ / スマホ 1920 x 1080
WUXGA デスクトップ / スマホ 1920 x 1200
QXGA デスクトップ / スマホ 2048 x 1536
WQHD デスクトップ / スマホ 2560 x 1440
WQXGA デスクトップ / スマホ 2560 x 1600
4K デスクトップ / スマホ 3840 x 2160

※出典:画面サイズ

 

 

iPhone / iOS
デバイス名 ブラウザ(横 x 縦) Pixcel比率  解像度
iPhone 3G / 3GS 320 x 480 1 480 x 320
iPhone 4 / 4S 320 x 480 2 960 x 640
iPhone 5 / 5s / 5c / SE 320 x 568 2 1136 x 640
iPhone 6 / 6s / 7 375 x 667 3 1334 x 750
iPhone 6 Plus / 6s Plus / 7 Plus 414 x 736 3 1920 x 1080
iPad mini 1024 x 768 1 1024 x 768
iPad mini 2 / mini 3 / mini 4 1024 x 768 1 1024 x 768
iPad / iPad 2 1024 x 768 1 1024 x 768
iPad 3 / 4 / Air / Air 2 / Pro 9.7 1024 x 768 1 1024 x 768
iPad Pro 9.7 1024 x 768 2 2048 x 1536
iPad Pro 12.9 1366 x 1024 2 2732 x 2048
  • ※情報が間違っている可能性があるため、参考程度に。
  • ※2016年10月までの機種を対象に掲載しています。

 

 

Galaxy / Android
デバイス名 ブラウザ(縦 x 横) Pixcel比率 解像度
Galaxy S / Plus / Dous / Dous 2 533 x 320 1.5 800 x 480
Galaxy S2 533 x 320 1.5 800 x 480
Galaxy S3 640 x 360 2 1280 x 720
Galaxy S4 640 x 360 3 1920 x 1080
Galaxy S5 640 x 360 3 1920 x 1080
Galaxy S6 640 x 360 4 2560 x 1440
Galaxy S7 640 x 360 4 2560 x 1440
Galaxy Note 640 x 400 2 1280 x 720
Galaxy Note 2 640 x 360 2 1280 x 800
Galaxy Note 3 640 x 360 3 1920 x 1080
Galaxy Note 4 640 x 360 4 2560 x 1440
Galaxy Note edge 640 x 400 4 2560 x 1600
Galaxy Note 5 640 x 400 4 2560 x 1440
Galaxy Note 7 ※爆発のため不掲載
Galaxy Alpha 640 x 360 2 1280 x 720
Galaxy A3 640 x 360 2 1280 x 720
Galaxy A5 640 x 360 2 1920 x 1080
Galaxy A7 640 x 360 2 1920 x 1080
Galaxy A8 640 x 360 2 1920 x 1080
Galaxy A9 640 x 360 2 1920 x 1080
Galaxy Ace 480 x 320 1 480 x 320
Galaxy Tab 600 x 1240 1 1024 x 600
Galaxy Tab 7.7 800 x 1280 1 1280 x 800
Galaxy Tab 8.9 800 x 1280 1 1280 x 800
Galaxy Tab 10.1 800 x 1280 1 1280 x 800
Galaxy Tab 2 600 x 1024 1 1024 x 600
Galaxy Tab 3 600 x 1024 1 1024 x 600
Galaxy Tab 4 800 x 1280 1 1280 x 800
Galaxy Tab Pro 800 x 1280 2 2560 x 1600
Galaxy Tab S 800 x 1280 2 2560 x 1600
Galaxy Note 8.0 800 x 1280 1 1280 x 800
Galaxy Note 10.1 800 x 1280 2 2560 x 1600
Galaxy Note Pro 12.2 800 x 1280 2 2560 x 1600
Galaxy C5 / C7 640 x 360 3 1920 x 1080
Galaxy Core 533 x 320 1.5 800 x 480
Galaxy Core Advance 533 x 320 1.5 800 x 480
Galaxy E5 / E7 640 x 360 2 1280 x 720
Galaxy Grand 533 x 320 1.5 800 x 480
Galaxy Grand 2 640 x 360 2 1280 x 720
Galaxy Grand Neo 533 x 320 1.5 800 x 480
Galaxy Grand Prime 640 x 360 1.5 960 x 540
Galaxy Grand Max 640 x 360 2 1280 x 720
Galaxy J 640 x 360 3 1920 x 1080
Galaxy J1 533 x 320 1.5 800 x 480
Galaxy J1 Mini 533 x 320 1.5 800 x 480
Galaxy J1 Ace Neo 533 x 320 1.5 800 x 480
Galaxy J1 Ace VE 533 x 320 1.5 800 x 480
Galaxy J2 533 x 320 1.5 800 x 480
Galaxy J5 640 x 360 2 1280 x 720
Galaxy J7 640 x 360 2 1280 x 720
Galaxy Mega 640 x 360 2 1280 x 720
Galaxy Mega 2 640 x 360 2 1280 x 720
Galaxy Mega 6.3 640 x 360 2 1280 x 720
Galaxy Pocket 320 x 240 1 320 x 240
Galaxy Pocket 2 320 x 240 1 320 x 240
Galaxy Pocket Neo 320 x 240 1 320 x 240
Galaxy Pocket Plus 320 x 240 1 320 x 240
Galaxy Pocket Duos 320 x 240 1 320 x 240
Galaxy Star 320 x 240 1 320 x 240
Galaxy Star 2 480 x 320 1 480 x 320
Galaxy Star 2 Plus 533 x 320 1.5 800 x 480
Galaxy Star Pro 533 x 320 1.5 800 x 480
Galaxy Trend Lite 533 x 320 1.5 800 x 480
Galaxy Trend Plus 533 x 320 1.5 800 x 480
Galaxy Trend 2 Lite 533 x 320 1.5 800 x 480
Galaxy Win 533 x 320 1.5 800 x 480
Galaxy Win Pro 640 x 360 1.5 960 x 540
  • ※情報が間違っている可能性があるため、参考程度に。
  • ※2016年10月までの機種を対象に掲載しています。

 

 

Window Resizer V2の活用

Window Resizer V2の活用

Google Chormeの拡張機能(プラグイン)、『Window Resizer V2』をインストールします。

Chromeにインストールしたら、有効化します。

有効化すると、画面一番右上にアイコンが表示されます。スマホ表示にしたいホームページを表示させてから、アイコンをクリックし、表示サイズを選んでください。

あらかじめプリセットが揃っていますが、必要な場合は、任意で追加してください。

 

返信を残す