iPhone Android スマートフォン使いこなし

パソコンの画面でスマホ表示を確認

WordPressなどで作成した自分のサイトやブログが、スマホではどのように表示されるか？
気になりますよね。

と言う事で、今回は、パソコン画面(PC)で、スマホ画面表示を確認できる方法を記載しておきます。

パソコンでスマートフォン表示がどんな状態になるのか？、見る方法は難しくありません。

まずは、今ご覧になっている「ブラウザ」の幅を調整(変更)する方法です。
これは一番簡単です。

ブラウザの右上のかどっちょに、マウスを持って行って、左クリックをずっと押した状態で、ブラウザの大きさを変更するものです。
ウィンドウ幅を狭めれば、実質、スマホ画面サイズにできます。
もしブラウザが「最大化」になっていましたら、一度、解除してからチャレンジ願います。

下記は本格的にスマホ表示を確認する方法です。

Chromeでスマホ表示

私も昔はNetscape(ネットスケープ)、そのあとInternetexplorer(IE)を使っていましたが、現在、お勧めなブラウザは断然、Googleの「Chrome」(クローム)です。
そのため、クロームでご説明申し上げますが、chromeだと、実際のスマホ表示にかなり近い状態を再現できます。

※パソコンに、chrome(クローム)を入れていない場合にはこちらより「ダウンロード」(インストール)できます。

操作方法は簡単です。

(1)F12のキーを1回押す　(ファンクション12を押す)

すると下記の「Developer Tools」が表示されます。

※画像はPCにてクリックすると拡大致します。

表示されたら、スマホ切り替えボタン？(勝手に名前つけてます)を押してみてください。

(2)スマホ切り替えボタンを押す

拡大すると下記のボタンです。

すると、画面が「細く」なりましたよね？

あれ？
もし、細くならなかった場合には、更に下記のところ「Responsive」をクリックして「iPhone」など、スマホ機種を選択してみてください。

数字入力の欄にピクセル数を入れても良いです。

これで、画面が細くなった場合において、表示がスマホ向けになっていない場合には、レスポンシブデザインではないと言う事ですので、WordPressの場合には、改善を図ったほうが良いでしょう。
ただし、一部のテーマ(WordPressのデザイン)では、レスポンシブが反映されないと言う不具合？もありますので、完全にスマホ画面を再現できる訳ではなさそうです。

このように、実際には、スマホ(機種)によって多少環境は異なります。
画面のサイズも5インチ、3.5インチ、6インチなど色々な大きさがありますしね。
そのため、全機種に適合させるように表示を工夫するのは難しいところもありますが、上記の方法で普通のスマートフォン表示はだいたい見ることができます。
少し表示を大きくすれば、タブレット端末での表示も確認可能です。

通常の画面サイズに戻す場合には、F12をまた押しましょう。

当方のWordPress塾生さまで「できないです」と言うので、そんなはずは無いのでおかしいな？と思っておりましたら、あとでわかったのですが、勘違いしてIEなど、他のブラウザにて、上記のF12を試していたようです。
繰り返しますが「クローム」でのやり方ですので、chromeにてお願い申し上げます。
なお、Firefox(ファイヤーフォックス)、InternetExplorerにも同様にスマホ表示確認機能はあります。

・WordPress (ワードプレス) お困り解決・お気軽設定代行サービス
・Revive Old Postの使い方と設定方法～TwitterとFacebookにて過去記事から自動配信
・WordPress専門「サーバー移転・引っ越し」格安代行レンタルサーバー移行代行 (個人サイト向け)