パソコンでスマホサイトを確認する

パソコンでスマートフォン用に作成されたサイトを確認する方法を紹介します。タップやスワイプも再現できます。

パソコンでスマホサイトを確認する

 

Last update 2015-02-18 09:12

 

以前、パソコンでスマホサイトを擬似的に表示させるソフトウエアを紹介(パソコンでiPhoneのエミュレーター)しましたが、今回はもっと簡単にそしてもっとそれらしくパソコンでスマホサイトを表示させる方法を紹介します。
もちろん無料。私のようにサイトを作成している人には必須な方法だと思います。
ちなみに私は、iPhone、アンドロイド、タブレットなど10台以上所有しているので、実際にスマホで表示させた時との比較も紹介したいと思います。

Sponsored Link

 

Google Chromeでスマホサイトの確認

用意するソフトウエアは、googleが無料で提供しているGoogle Chromeというインターネットを表示するためのソフト(ブラウザといいます)になります。

ChromeをダウンロードGoogle Chromeのダウンロードページへ行き、「Chromeをダウンロード」をクリックします。

同意してインストール利用規約が表示されるので、ひと通り目を通し、「同意してインストール」をクリックします。
なお、「Google Chromeを規定のブラウザとして設定する」をチェックしておくと、以後、インターネットを利用するときは、このChromeが起動するようになります。

Google Chromeを起動インストールが完了すると、デスクトップ上にGoogle Chromeのアイコンが作成されているので、これをダブルクリックして起動します。

パソコン版Chromeで表示させたところスマホで表示したいページを表示します。
このままだとパソコン用のサイトが表示されます。

スマホ用に変更する

F12を押すスマホでどう見えるか確認したいページを表示させたら、キーボードの「F12(数字の上にあります)」を1回、押します。

デベロッパーモードになるすると、このように画面下か右側に何やら難しそうな文字が表示されました。

モバイルのアイコンをクリックよく見るとスマホのような小さなアイコンがあるので、ここをクリックします。

小さな画面になるすると、このように画面の表示部分が小さくなり、スマホ的な感じになりました。

スマホを選択する

スマホの種類を選択画面の上の方にある「Select model」の部分をクリックすると、スマホの機種を選択できます。
例えばiPhone6でどう見えるか、を確認したいときは、「Apple iPhone6」をクリックします。

警告が出るので更新黄色い警告が表示されます。(更新してくださいということが書かれている)

更新ボタンをクリックURLの右隣にある矢印を1回クリックします。

スマホモードで表示するとスマホで見た時の画面になりました。

Galaxy S4モードiPhone以外にもGALAXYやiPadなども選択できます。が、日本のメーカーが出しているような世界ではマイナーなスマホは未対応のようです。

iBBDemo3との比較以前紹介したiBBDemo3との比較。
ChromeのほうがiPhone6に近いですね。

実際のスマホのブラウザとの比較

iPhoneのSafariで表示こちらはiPhone6のSafariで表示させたところです。

Google Chromeで表示させたところこちらがGoogle ChromeのiPhone6モードで表示させたところ。
微妙に文字の大きさやフォントが違いますが、それでもほぼきちんと再現出来ていますね。

iPhoneとパソコン版の比較横に並べて比較してみました。

Yahoo!こちらはパソコン版のYahoo!のトップページ。

スマホ表示させたYahooGoogle Chromeでスマホ表示させたところ。ちゃんとスマホ用のYahoo!である m.yahoo.co.jpが表示されていました。

スワイプやタップも再現

マウスカーソルが丸くなるこのGoogle Chromeのスマホモードのユニークな部分が、スワイプやタップも再現されているということです。
マウスカーソルが、このように灰色の丸に変化しています。
で、マウスでクリックしたまま上下に動かすと、それに合わせてページもスクロールされます。
逆にスクロールバーが無効になってしまい、上下にスクロールするにはスワイプか、マウスのホィールを使うしかないようになってしまっています。

その他の機能

解像度解像度はiPhone6の場合、「375 x 667」で表示されるようです。
この解像度は自由に変更できるので、対応していないスマホの機種もここで変更して擬似的に表示させることができます。

ユーザーエージェントその隣にはユーザーエージェントが記入されています。
どうやらここに記載されたユーザーエージェントを送信しているっぽい。
この値は自由に変更できます。

通信速度更には通信速度も擬似的に体験できるようです。
例えば制限を受けて遅くなると、250Kbpsに制限されたりしますが、制限された場合、どんな漢字で表示されるか、なんてのも体験できます。

iPhoneとアンドロイドの比較

最後にiPhoneとアンドロイドではどのような違いがあるのでしょうか?

アンドロイドのブラウザで表示こちらはアンドロイドの標準のブラウザで表示させたところ。

iPhoneとアンドロイドの比較iPhoneのSafari(左側)とアンドロイドの標準ブラウザとの比較。
アンドロイドだと若干文字が太くなるようですね。
アンドロイドの場合、フォントの大きさを変更できる機種もあるので、すべてがこのように表示されるわけではありませんが。

関連ページ

最終更新日 2015-02-18 09:12

 

Sponsord Link

 

 

投稿日:2015-02-18 | このページのトップへ | コメントを書く | 管理