Blog運営 Google

簡単!PCでサイトのスマホ表示を確認する方法(chrome版)

更新日:

PCでスマホサイトの確認がしたい!

C789_mbaniokaretakeitai500

現在ブログのスマホ版のレイアウト改造を目論んでるcv0629です。そこで色んな人のブログのレイアウト見ているのですが、PCで「この人のレイアウト素敵だな〜スマホだとどうなってんだろ?」とかいう時に、スマホでまた最初から検索して〜みたいな流れが面倒くさ過ぎたので、PCのブラウザで表示できる方法を探しました。

※今回はchrome、バージョン 33.0.1750.117での操作となります。

SPONSORED LINK

まずは「要素の検証」を開きましょう!

初めにPCのchromeでスマホ版をを確認したいサイトへ行き、右クリックをします。そうすると下の画像のようなリストが出ますので「要素の検証」をクリック。

youso-kensyou

そうすると下記のような画面になります。下のアルファベットでつらつら記述されている画面が、見ているサイトのHTMLコードになります。その中の赤枠で囲った部分に幾つかマークが有るかと思います。

youso-kensyou2

下の画像の赤枠部分のマークをクリックしてください。

youso-kensyou3

次はEmulationの設定

マークをクリックすると更に画面が分割されると思います。下の画像の赤枠で囲った「Emulation」というボタンをクリックしてください。

emulation

そうすると「Emulation」タブの中の設定画面になります。「Device」タブの①にて機器一覧が表示されます。Google NexusやGalaxy、Xperiaなど様々な画面サイズのものが出ますので、お好きな端末を選んでください。選択後、②の「Emulate」をクリックすると選択した機器の画面サイズに切り替わります。

emulation2

画面サイズは変わったけど、サイトの表示がスマホ版に切り替わらない場合は、F5キーを押して更新してみてください。そうすればスマホ版に切り替わると思います。あとリンクをクリックしても画面が変わらないようでしたら「Device」の下にある「Sensors」というタブの「Emulate touch screen」というところにチェックを入れてください。

emulation3

これで簡単にスマホサイトを確認出来るようになりました。

よし、素敵なスマホサイト探しにいってきま〜す。

-Blog運営, Google

Copyright© cv0629 , 2017 AllRights Reserved.