PCでスマホサイトの表示

(2020年2月15日更新) パソコンのWebブラウザーのMicrosoft Edgeで、ウェブサイトをスマホで見るような画面表示するやり方です。
インターネットのウェブサイトで、パソコンで見る場合とスマホで見る場合で表示が異なる場合あります。
パソコンでもスマホで見るような画面に表示したい場合です。
例えば、Yahoo! JAPANのウェブサイトのページです。
Microsoft Edgeで表示

Microsoft Edgeのユーザーエージェントを変更してスマホで見るような画面に表示

やり方

使用するWebブラウザーによってやり方が違います。
IE11でスマホサイトの表示(ユーザーエージェントの変更)の記事はこちら

新しいMicrosoft Edgeでスマホ画面表示する手順

新しいMicrosoft Edgeでスマホ画面表示する手順です。
(旧Microsoft Edgeの場合は、このページのさらに下にスクロールしたところにあります)

１．新しいMicrosoft Edge画面上でキーボードの「F12」キー。
もしくは、画面上で右クリックして、表示したメニューの「開発者ツールで調査する」をクリック。

２．画面右側で「モニターのようなアイコン」ボタンをクリック

３．新しいMicrosoft Edgeの「更新」ボタンをクリックして、表示を更新

４．Yahooのページが、スマホで見るような表示になりました。

５．つまみのようなバーで表示の幅を変更できます。

６．「Responsive▼」で、表示するスマホのタイプを変更できます。

「iPhone 5/SE」の表示にしてみました。

(旧)Microsoft Edgeでスマホ画面表示する手順

(旧)Microsoft Edgeでユーザーエージェントの変更してスマホ画面表示する手順です。
例として、ユーザーエージェントをアンドロイドスマホに変更する手順です。

１．まず、スマホサイト表示したいページを表示しておきます。
※ページ移動すると、せっかく変更したユーザーエージェントが戻ってしまうため。
２．Microsoft Edge画面右上の「・・・」をクリック。表示したメニューの「開発者ツール」をクリック。
（または、Microsoft Edge画面上で「F12」キー）

３．Microsoft Edge画面右に開発者ツール画面が表示されるので、開発者ツール画面のメニューで「エミュレーション」をクリック。

４．エミュレーションの画面で「ユーザーエージェント文字列」を変更します。

５．エミュレーションの画面で「ユーザーエージェント文字列」を「カスタム」に選択。
次に「カスタムユーザーエージェント文字列」をアンドロイドスマホのユーザーエージェント文字列にします。
アンドロイドスマホのユーザーエージェント文字列は、Googleで検索すると見つかります。「アンドロイド　ユーザーエージェント」のキーワードで検索してください。
例えば、auのUser Agent情報のページで分かります。
AQUOS sense2 SHV43の機種のユーザーエージェントは、
Mozilla/5.0 (Linux; Android 8.1.0; SHV43 Build/SA105) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.91 Mobile Safari/537.36
このユーザーエージェント文字列をコピーします。

６．「カスタムユーザーエージェント文字列」の入力欄に　コピーしたユーザーエージェント文字列を Ctrl+Vで貼り付けて、「Enter」キーで画面が更新されます。