パソコンから簡単にモバイル端末向けページを確認！そう、Chromeならね

イントロダクション

昨今の急速なスマートフォンなどのモバイル端末の普及に伴い、モバイル端末向けに最適化されたWebページが配信されることが多くなりました。

そのため、同じURLのWebページでも、パソコンのブラウザで表示した場合と、モバイル端末のブラウザで表示した場合で異なる表示になります。




さて、手元にパソコンしかない場合には、どうやってモバイル端末向けのWebページを表示したらよいのでしょうか？

方法はいくつかありますが、パソコンにChromeがインストールされている場合には、標準の状態で簡単にモバイル端末向けWebページを確認できます。

パソコンにインストールされたChromeでモバイル端末向けページを確認する方法

Chrome でモバイル端末向けページを表示するには、デベロッパーツールを使用します。

デベロッパー（開発者）ツールと聞くと、難しそうな印象を持つかもしれませんが、そんなことはありません！

誰でも簡単に使えるものです！


では、実際にモバイル端末向けのページを表示させてみましょう。

まず、モバイル端末向けのページを表示させたい Web ページにアクセスします。

ここでは説明のため、このブログのページを使用します。

Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/

次に、デベロッパーツールを表示します。

デベロッパーツールを表示する方法は複数ありますが、手軽に表示することができる方法として、ページの適当な箇所を右クリックして表示したメニューから「要素を検証」をクリックします。

Chrome:Webページ上の適当な箇所で右クリックして、
表示されたメニューから「要素を検証」をクリック

すると、次のようなデベロッパーツールが表示されます。

Chrome:デベロッパーツール
赤枠の〇で囲んだ部分が「Toggle device mode.」ボタン

画像内の赤枠の〇で囲んだ「Toggle device mode.」のボタンをクリックします。 

すると、Webページの上部に表示デバイスを選択する「Device」などの表示が現れます。

[Device]の中から、モバイル端末向けページを表示するための端末を選択します。

ここでは、最近発売されたモバイル端末である「Apple iPhone6」を選択してみました。

Chrome:デベロッパーツール
Webページを表示するデバイスの選択

Webページを表示する端末を選択すると以下のようなメッセージが表示されます。

Chrome:デベロッパーツール
表示されたメッセージ：You might need to reload the page for proper user agent spoofing and viewport rendering.

メッセージ通り、ブラウザのリロードボタンを押します。

すると、今まではパソコン向けの表示だった Web ページが、モバイル端末向けの表示になります。

Chrome:デベロッパーツール
Web ページがモバイル端末向けの表示になる
画面サイズは[Apple iPhone6]用

以上の操作で、パソコン上でモバイル端末向けのページを確認することができます。
これで、Web ページのモバイル端末上での表示のされ方や動作などを確認できます。

Webページのモバイル端末向けの表示を終了したい場合

なお、Webページのモバイル端末向けの表示を終了したい場合には、デベロッパーツールの右上にある[×]ボタンを押してデベロッパーツールを閉じた後、ブラウザのリロードボタンを押してWebページを再読み込みすれば、通常のパソコン向けの表示に戻ります。

Chrome:デベロッパーツール
右端の[×]ボタンを押すことで、デベロッパーツールを閉じることが出来る

但し、一部ブログサービス(Bloggerなど)では、Webページのモバイル端末向けの表示を行うと URL 自体がモバイル端末向けのものに変化してしまうため、Webページの再読み込みでは元に戻らないケースがあります。

その場合には、そのWebページに対して通常のパソコン向け表示でアクセスするときの手段を用いて再度アクセスしてみてください。
（検索エンジンからアクセス、お気に入り・ブックマークからアクセス、直接URLを入力してアクセスするなど。）

説明に用いた Chrome のバージョン

なお、この説明に用いた Chrome のバージョンは 39.0.2171.71 m です。
使用しているChrome のバージョンによって、モバイル端末向けのページの表示方法に多少の差異がある可能性があります。

関連情報

Blogger のブログの場合、どんなブラウザを使用していても、モバイル表示に切り替える方法があります。

Bloggerのモバイルページをパソコンから見る方法

http://upa-pc.blogspot.com/2014/12/blogger-view-mobile-page-from-pc.html