PCブラウザでスマホ版サイトを表示する方法

ブログやサイト作成をしていると、気になるのがスマホでの表示。

ここ数年でスマホからのアクセスがPCを抜いているので、
レスポンシブデザインは必須。

最近のワードプレスのテンプレートや
サイト作成ツールはレスポンシブデザインに対応しており、
意識しなくても勝手になっているのだが、
そうはいっても、表示の確認は絶対に必要。

確認のためにいちいちスマホでアクセスしてってのは
なかなかめんどくさい。

そんな時に役立つ方法をご紹介します。

Chromeでのスマホ表示確認方法

Chromeでスマホ表示の確認をする方法だが、
拡張機能でそういったものもある。

「User-Agent Switcher for Chrome」や
「Mobile Layouter」などだ。

でも、これが最近ちゃんと動かない・・・。

困ったという人もいるかもしれないが、
なんのことはない、
Chromeでは標準で確認する方法がある。

キーボードの「F12」を押すか、
該当のWEBページ上で右クリック→「検証」をクリック。

するとこんな画面になります。↓

そして、この「Responsive」をクリック

 

すると、表示させたいスマホの一覧が出てくるので、
確認したい機種を選ぶだけ。

タッチ操作もきちんと再現できるので、
タップやスワイプのような操作も可能です。

また、ここのローテーションマークをクリックすれば、
横画面表示の確認も出来ます。

わざわざ拡張機能を入れなくても、
簡単に確認できます。

ちなみに、元の画面に戻すには
右上の「☓」を押してデベロッパーツールを閉じるだけです。

 

Chromeだけでなく、
FireFoxやIEでの確認方法もありますが、
アドオンを使用したりするので、Chromeが一番手っ取り早いです。

まとめ

拡張機能などを追加しなくても、
簡単に表示できますので、
ぜひ活用してみてください。

ただし、スマホでの最終確認はしておいたほうが確実です。