スマホサイトをパソコンでサクッと確認する方法

2020年8月27日2022年6月26日

当ページのリンクには広告が含まれています。

パソコンでブログ記事を書いている時、スマホでどう見えるのか気になることがよくあります。ブラウザの画面を狭くするのも手で管理人もよくやりますが、もう少しスマートなやり方はないのか調べてみました。ちなみに管理人がよく使うブラウザはGoogle Chromeで、パソコンはマックです。

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

管理人の別サイト「北海道の滝めぐり〜リターンズ〜」を例に、スマホサイトをパソコンのGoogle Chromeで確認する方法を見ていきます。北海道の滝めぐり〜リターンズ〜のトップページです。

画面上のどこでもいいので右クリックするとメニューが出てきます。

メニュー内の「検証」を選択すると右側半分にディベロッパーツールが開きます。

ディベロッパーツールの上にある「Toggle device toolbar」をクリックします。（アイコンにマウスをのせると「Toggle device toolbar」と表示されます）ブラウザの左側に下画像のようなスマホサイズでの表示に切り替わります。

スマホ表示の上にある「Responsive」をクリックすると、スマホやタブレットが出てきます。

ここでは管理人の持っているスマホ、ｉＰｈｏｎｅＳＥ（第二世代）にあわせて「iPhone6/7/8」を選択しました。

もう一度「Toggle device toolbar」をクリックするとパソコン表示に戻ります。また、ディベロッパーツールを閉じる時は、右上の×をクリックします。

さいごに

パソコンのブラウザでウェブページがスマホではどのように表示されるかを確認するため、Google Chromeを使用する方法を見てきました。ブラウザの幅を変えるだけでも十分確認できますし、今回紹介したやり方がスマートなのかは賛否あると思います。管理人的には記事を書いている途中でブラウザの幅を一定にしておきたいがために、別の方法をさがして見た次第です。さいごに、この方法はあくまでエミュレータ上での確認で、本物のスマホで表示するのと異なることもあります。最終的にはスマホなりタブレットで確認することが必要ですね･･･！北海道の滝めぐり〜リターンズ〜のサイトです。
お時間があればご覧下さい ↓･･･🙏