どうも、スマコマのコマ太郎です。
今やホームページはスマホサイト対応は常識。WordPress のテーマを使えば、ほぼスマホ対応されていますよね。
アクセスの大半がスマホというジャンルも多くなっていて、スマホサイトの重要度は増すばかりです。
でも WordPress を使うのはパソコンだから、意外とスマホ表示を確認していない人も多いのでは？
文字だけなら問題ありませんが、画像やテーブルタグを使うとスマホではデザインが崩れてしまうなんてことも。
ですからページを作ったら、毎回確認しておきたいものです。でも毎回、スマホの実機を使って確認するのは面倒ですよね。
そこで今回はパソコンでスマホサイトを確認する方法をご紹介しようと思います。
ブラウザの機能を使ってスマホ表示する
実はブラウザには、スマホ表示をエミュレートする機能が実装されているのです。
なので、ブラウザでスマホ表示ができちゃうんですね。（chrome, firefox, ie, safariなど）
方法は簡単です。
まず表示を確認したいページを表示させます。（ここでは chrome で説明します）
次に [F12]キーを押し、開発者ツール（デベロッパーツール）を表示します。
chromeデベロッパーツール
開いたウィンドウにあるスマホアイコン（上図）をクリックするとスマホ表示とパソコン表示が切り替わります。
パソコン表示に戻したい場合はもう一度クリックすると戻ります。
なお表示を切り替えた際は、一度ブラウザの更新ボタンを押すことをおすすめします。サイトによってはパソコンとスマホで使っているデータが違うため、再リクエストして正しいデータを読み込ませるのが無難です。
スマホサイトの表示
上図の赤枠部分をクリックするとデバイス（iPad,iPhone,Galaxyなど）を変更することもできます。
開発者ツールは、再度 [F12]キーを押すことで終了させることができますよ。
なお Firefox や IE でも似たような操作でスマホ画面を確認することができます。
PCでスマホサイトを見るのまとめ
ブラウザの開発者ツールでスマホ画面を確認する方法をご紹介しました。
わざわざ実機で確認する必要がないので便利ですよ。
ただあくまでエミュレーターであることには注意してください。実際の表示と若干違うことがあります。
ですからページの作成途中で簡易的に確認したいときに使うと良いでしょう。そして最終確認は実機で行うことをおすすめします。
ちなみにLINEを使うと手早くパソコンとスマホ間でデータのやり取りができますよ。ぼくはこれを使って実機で最終確認を行っています。LINEを使って自分だけにメッセージを送る方法はこちらの記事に書きました。
↓↓
