パソコンでスマホのブラウザ表示を確認する方法（Google Chrome Ver.33.0.1750.117 m）

 
パソコンでホームページを作っている人やブログを書いている人は、普段あまり意識しないのがスマートフォンでの表示イメージです。
スマートフォンの個人所有率が過半数を超えている状況を考えると無視できないことです。

最近のスマホの画面サイズは代表的なもので、iPhone5の4.0インチから Androidの主流である5.0インチ、大きいものでは6インチを超えるものもあり、サイズはさまざま。

自分のスマホで表示の確認、とはいっても、これだけサイズがあると確認しようがない！？

と思って、ググってみたら、パソコンのブラウザで、指定したスマホの画面サイズで疑似的に確認する方法がありました。

 

■疑似的に確認する方法は見つけたけれど・・・

私は、Google Chrome を使っているのですが、Chromeでは、デベロッパーツールを使えば確認できるみたい。

でも、ググってみた確認方法で設定をしていくと、手順に載っている画面レイアウトと違っている。
参照させてもらっているサイトの作成日付はわずか１か月前で バージョンも “32.0.1700.72 m”、私の Chrome のバージョンは “33.0.1750.117 m”で、かけはなれたバージョンでもないのに、ガラッとユーザーインターフェースが変わってしまった・・・。

スマホの画面サイズに設定するには、どうやればよいの？

いろいろ Chrome をいじっていたら、やっと発見！

 

■設定手順

Google Chrome “33.0.1750.117 m” で、スマホのブラウザ表示を確認する方法です。

１．スマホ表示させたいページで右クリック（クリック場所はどこでもＯＫ）

右クリックメニューで “要素を検証(N)” をクリックします。

ブラウザ上にデベロッパーツールが表示されます。

２．デベロッパーツールの “Settings”アイコンをクリック

“Settings” がポップアップ表示されます。

３．”Show ‘Emulation’ view in console drawer.”をチェック

チェック後、”Settings” ポップアップ右上の×ボタンクリックし、ポップアップを閉じます。

 
４．コンソール表示アイコンをクリック

コンソールが表示されます。

５．コンソールメニューバーの EmulationボタンをクリックしDeviceリストを表示

 
６．デバイスを選択

Emulation（疑似表示）可能なスマホが表示されます。

今回は、私が持っている Xperia UL と同等の画面サイズ・解像度の “Sony Xperia Z, Z1” を選択しました。

７．”User Agent” の Emulationボタンをクリック

画面サイズはスマホっぽくなりましたが、表示イメージがパソコン表示のままです。

ページの再読み込みボタンをクリックするか、F5キーを押すと、表示イメージもスマホっぽくなります。
ちなみに、Ｆ５キーを押してもスマホイメージで表示されない場合は、Ctrlキーを押しながらF5キーを押してください。

８．ページの再読み込み

 
９．実機の表示は？

私が持っている Xperia UL での表示内容です。

パソコンのGoogle Chrome で Emulation（疑似表示）しても、ほぼイメージ通りに表示されたことが分かります。
ちなみに、Xperia UL で使っているブラウザは、同じGoogle Chromeです。

１０．パソコンのブラウザ表示を元に戻す

表示をパソコン表示に戻す場合は、”User Agent” の Resetボタンをクリックし、ページの再読み込みを行います。

 
_/_/_/_/_/

 
Crome は Googleのブラウザですが、Emulation（疑似表示）可能なデバイスに、Apple の iPhone, iPad もリストされていました。
しかも、少し前のモデルから最新モデルまでリストされていました。
ホームページを作る人やブロガーにとって、ユーザー数の多い Apple製品での表示確認は必須ですね。

自分のホームページやブログが、スマートフォンで どう表示されているか見たことがない人はお試しください。

 
んだんだ