ギャッターのフリーソフト広場は、インターネット上の便利なフリーソフトやネットサービス、動画の保存方法、買ったものレビューを紹介するブログです!

ギャッターのフリーソフト広場 TOP  >  Windows・NET小技 >  パソコンで実機同様のスマホのブラウザ画面を表示する方法

スポンサーリンク

パソコンで実機同様のスマホのブラウザ画面を表示する方法

パソコンでスマホ表示23-45-47-536

概要
普段閲覧しているWebサイトは、パソコン形式とスマートフォン形式の
2つのモードがあります。パソコンからWebサイトを開けばパソコン形式で
スマートフォンからWebサイトを開けば当然、スマートフォン形式で
表示されます。

しかしスマートフォン形式の表示をパソコンでも見たいことはありませんでしょうか。
今回は、パソコンで実機同様のスマートフォン形式画面の表示を行う方法を紹介します。
※スマートフォンで表示されるブラウザ画面をパソコンで閲覧する方法となります。



GoogleChromeブラウザ
今回はGoogleChromeブラウザとFireFoxブラウザの2つで紹介します。
まずはGoogleChromeブラウザでスマートフォン表示の方法です。

スマートフォン形式に変更したいページを開いてから
「F12」キーで開発者コンソールを開きます。


パソコンでスマホ表示06 23-41-09-875


ウインドウ化するために縦3点のアイコンをクリックし
下記のような箇所をクリックします。


パソコンでスマホ表示6 23-41-19-662


するとブラウザ上に開いていた開発者コンソールが
ウインドウ化した状態になり操作しやすくなります。

次に上部タブの左から2番目のスマートフォンアイコンをクリックします。


パソコンでスマホ表示06 23-41-34-852


これで表示形式がスマートフォンに切り替わります。


パソコンでスマホ表示03-06 23-41-45-791


左上の機種からiPhoneやAndroidなど他の機種を選択できます。


パソコンでスマホ表示-06 23-41-48-390


「Edit...」から別のスマートフォンを追加できます。


パソコンでスマホ表示06 23-42-06-397


チェックを入れるだけで追加状態になり変更時のウインドウは
開いたままで最小化しておきましょう。

「Rotate」で画面を横画面にできます。


パソコンでスマホ表示6 23-41-51-244


横画面でこんな感じになります。


パソコンでスマホ表示 23-41-58-460


スマートフォン表示を解除するには
スマートフォン化したスマートフォンアイコンをクリックで解除されます。


パソコンでスマホ表示06 23-42-17-561



FireFoxブラウザの場合
「Ctrl」+「Shift」+「I」を押して開発者コンソールを開いて「レスポンシデザインモード」をクリックします。


パソコンでスマホ表示3-06 23-27-17-397


「端末が選択されていません」のプルタブから各種端末を選択します。


パソコンでスマホ表示03-06 23-27-50-103


「リストを編集」から他の端末を追加できます。


パソコンでスマホ表示-06 23-28-11-396


ブラウザがスマートフォンっぽい表示形式になりましたね。


パソコンでスマホ表示3-06 23-28-38-634


開いてみると確かにiPhoneで私のブログを開くと
こんな感じに表示されます。


パソコンでスマホ表示3-06 23-29-42-854



雑感
パソコンでスマートフォンのモードを閲覧してもさほど意味はないんですが
Web開発している方などは各スマートフォンでどのような表示のされ方をするのか
確認するのに便利です。また、スマートフォンからのみしか閲覧できないようなサイトも
パソコンから閲覧したい際にいいかもしれません。

興味ある方はチェックしてみてください。
関連記事

スポンサーリンク
[ 2018年03月11日] カテゴリ:Windows・NET小技 | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

カテゴリ
スポンサーリンク