パソコンの画面でスマホ表示を確認する簡単な方法~ボタン操作2回

スマホ表示確認


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をまた押しましょう。

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

オンライン・アクセスアップ塾

閲覧ありがとうございます。ご参考になりましたでしょうか?
  • すごく良かった 
  • 普通だった 
  • 参考になった 

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でフォローしよう!





5万文字以上のブログ収入を得る為の「実践バイブル」を創刊致しました。
読切タイプの参考本的な内容です。詳しくは下記をご参照願います。
takada式「ブログで収入を得る実践テクニック」(適時追加あり)

無料でブログ・サイトの「アクセス向上」を狙うノウハウマガジンです。
無料購読可能→いつでも購読中止できるnoteにて無料配信中。
takadaのブログで収入講座(無料版)

takada素浪人

投稿者プロフィール

お忙しい中「脱藩起業」をご覧頂きまして深く御礼申し上げます。
現在、サイト運営の広告収入のみで生活している個人事業主で、2016年はお陰様で、運営サイト全体数値ですが5000万PVを達成致しました。
このサイトにてアドセンス広告は掲載しておりませんが、WordPressを使用したアフィリエイトや広告展開、そして愚痴などを中心に言いたいことも掲載させて頂いております。
もしよろしければ、Facebook・Twitterなどでご感想やご質問など賜りますと嬉しいです。(^-^)
あと採算度外視で「ブログで稼ぐオンライン・アクセスUP塾」も始めました。

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

コメントするためには、 ログイン してください。

Twitter でフォロー

note
takadaの読み切りバイブル


【A8.netに登録しよう!】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
アフィリエイトならA8.net
ページ上部へ戻る