Microsoft Edgeでスマホサイトの表示

PCでスマホサイトの表示

パソコンのWebブラウザーのMicrosoft Edgeで、ウェブサイトをスマホで見るような画面表示するやり方です。

インターネットのウェブサイトで、パソコンで見る場合とスマホで見る場合で表示が異なる場合あります。
パソコンでもスマホで見るような画面に表示するやり方です。

例えば、Yahoo! JAPANのウェブサイトのページです。
Microsoft Edgeで表示すると、パソコンでの表示画面はこんな感じです。
パソコン(Microsoft Edge)でウェブサイトの表示画面

Microsoft Edgeのユーザーエージェントを変更してスマホで見るような画面に表示すると、こんな感じです。
パソコン(Microsoft Edge)で スマホで見るようなウェブサイトの表示画面

操作手順

※IE11でスマホサイトの表示する場合は、こちらのブログ記事です。

IEでスマホサイトの画面表示

PCでスマホサイトの表示 パソコンのWebブラウザーのIE11(Internet Explorer 11)で、ウェブサイトをスマホで見るような画面表示するやり方です。 インターネットのウェブサイトで、パソコンで見る場合とスマホで見る場合...

hayakute.kantan-sakusaku.com

2021.09.18

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

(※旧バージョンのMicrosoft Edgeの場合は、このページのさらに下にスクロールしたところにあります)

１．新しいMicrosoft Edge画面上で、開発者ツールを表示するショートカットキーの「F12」キー、または（キーボードで「Ctrl」＋「Shift」＋「i」キー）
マウスで開発者ツールを表示する場合は画面上で右クリックして、表示したメニューの「開発者ツールで調査する」をクリックします。

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

３．次に、新しいMicrosoft Edgeの「更新」ボタンをクリックして、表示を更新すると、スマホ(モバイル)ページの表示になります。

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

表示するスマホの機種変更

「ディメンション:レスポンシブ▼」(Responsive)で、表示するスマホの機種を変更できます。

旧バージョンの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」キーで画面が更新されます。