スマホで見てみる必要なし!パソコンからサイトのモバイル表示を確認する方法

今まで知らなかった私がバカでした・・・というオチのつきそうな内容です。

インターネットサイト(ホームページ、ブログなど)を作っていてスマホやタブレットではどう表示されてるのかな?と思ったことないですか?しかも、機種によっては画面サイズが違うからいろんな機種の表示を試してみたいなんてことありませんか?

この機能を知るまで私は一生懸命自分のスマホ片手に確認してました。

ではどうやってパソコンの画面上でスマホやタブレットなどの表示を確認するのか・・・特別なツールやサイトで見るの?

いやいやそんなことをしなくても、いつも使っているインターネットブラウザ標準の機能でできてしまうんですね、これが!

早速やり方を紹介します。Google Chromeを例に説明しますが、他のブラウザでも同様の機能がありますからやってみてくださいね。

スポンサーリンク

パソコンからサイトのモバイル表示を確認する方法

デベロッパーツールってご存知ですか?ページのソースを確認したり、CSSをカスタマイズするときに「この部分はどのセレクタが適用されているのか?」を知ることができる便利なツール。実はこの機能にモバイル表示のツールも備わっているんです。

デベロッパーツールの起動方法は2種類
1つめはページを表示している状態でキーボードの「F12」を押す方法。これが一番単純です。

そして2つめはメニューから「その他のツール」→「デベロッパーツール」を起動する方法。

どちらの方法でもいいので開いてみてください。

ページのプレビューと共にコードのようなものが表示されますね(上下表示の場合と左右表示の場合あり)

ここからが本番です

  1. コードが表示されている側の一番上にある左から2つ目の画面が重なっているようなアイコンをクリックします
  2. f12-0

    すると、プレビューの上に何か追加されますね、何となく画面サイズのような、機種名のような(写真はGalaxy S5)

  3. ここをクリックして見てみたい機種を選択します
  4. f12-1

    お?画面が小さくなった・・・でも何か変?レスポンシブ対応だったりモバイル表示用にテーマ切り替えたりしてるはずなのに縮小されただけ?となった方、正解?です。

  5. 正常に表示されなかったら画面をリロードします
  6. すると・・・
    f12-2
    写真のようにきちんとモバイル用の表示になりましたね。

    Chromeの仕様なのか、最初だけリロード(画面の更新)が必要なようです。私はここで「なんだ、表示できないじゃん!!」と少々イライラしました・・・。

f12-0
の画面の一番右にある「×」をクリックすると通常のパソコン表示に戻ります。

ここでも「戻らないじゃん」という方、リロードしてみてくださいね。

以上、「スマホで見てみる必要なし!パソコンからサイトのモバイル表示を確認する方法」でした。

役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
ページ先頭へ