WEBサイトがモバイル端末からどう見えるかを確認する方法

モバイル端末の画面サイズは様々

現在ではWEBサイトへのアクセスの半分程度は、スマホやタブレットなどのモバイル端末からです。

モバイルフレンドリーテストに合格したとしても、いろいろな画面サイズのモバイル端末にWEBサイトがきちんと表示されているとは限りません。

アドセンス広告が画面からはみ出ていないか、画像がセンタリングされているかなどが心配なものです。

モバイル端末の画面サイズは様々ですが、現在流通しているモバイル端末においては、概ね下記のサイズで確認すれば問題ないといえます。

・画面サイズ 320×568 代表例 iphone5
・画面サイズ 375×667 代表例 iphone6
・画面サイズ 414×736 代表例 iphonePlus
・画面サイズ 360×640 代表例 Galaxy S5
・画面サイズ 412×732 代表例 Nexus 5X,6P
・画面サイズ 768×1024 代表例 iPad
・画面サイズ 1024×1366 代表例 iPad Pro

モバイル端末からどう見えるかを確認する方法

Google Chromeのデベロッパーツールを使えば、誰でも簡単にPCから確認することができます。

1.Google ChromeからWEBサイトへアクセスする。

右上の赤枠で囲んだ記号(Google Chromeの設定)をクリックし、

「その他設定」⇒「デベロッパーツール」と進む

2.デバイルツールを使用する

赤枠の記号をクリックしてデバイスツールバーを表示します。

3.デバイルの種類を選択して、モバイル端末からの表示を確認する。

赤枠でデバイスの種類を選択することで、いといろな画面サイズのモバイル端末からの表示を確認することができます。

2017年1月時点で、デバイスの種類として選択できるのは下記であり、流通しているモバイル端末の大半の画面サイズに関して、このツールで確認するすることが可能です。

・iphone5
・iphone6
・iphonePlus
・Galaxy S5
・Nexus 5X,6P
・iPad
・iPad Pro

簡単に使えて非常に便利なツールですので、ぜひ使用してください。

お役に立った場合は、下記をクリックいただければ嬉しいです。

にほんブログ村 小遣いブログ アフィリエイトへ