興味のあるWebサイトのモバイル版をテストするには、PCのスマートフォンブラウザエミュレータにアクセスする必要がありますか？たぶん、あなたはWeb開発者であるか、Web開発者になりたいので、作業中のプロジェクトのモバイルブラウザをシミュレートする必要があります。理由に関係なく、 ^(Regardless)Google Chrome、Mozilla Firefox、Microsoft Edge、Operaでモバイルブラウザエミュレータにアクセスする方法は次のとおりです。

GoogleChromeでモバイルブラウザエミュレータをオンにして使用する方法

Google Chromeで、モバイルブラウザエミュレータで表示するWebサイトに移動します。次に、キーボードのCTRL + SHIFT + Iキーを押すか、マウスで右上隅にある3つの縦のドットをクリックして、[GoogleChromeのカスタマイズと制御^{(“Customize and control Google Chrome”)}]メニューを開きます。[その他のツール]、 [^{(More tools, )}開発者ツール]^{(Developer Tools)}の順に選択します。

^{(Access Developer Tools)}GoogleChromeの^{(Google Chrome)}開発者ツールにアクセスする

「デバイスツールバーの切り替え」^{(“Toggle device toolbar”)}ボタン（タブレットの横にあるスマートフォンのように見えます）をクリックまたはタップするか、キーボードのCTRL + Shift + Mを押します。これにより、モバイルページがロードされるデバイスツールバーがアクティブになります。デフォルトでは、デバイスツールバーはロードしたサイトのレスポンシブ^(Responsive)テンプレートを使用します。それをクリック^(Click)して、エミュレートするモバイルデバイスを選択します。オプションには、多くのiPhone、iPad、Surface Duo、2つのSamsung Galaxyデバイス、およびPC用のMotoG4モバイル^{(Moto G4 mobile)}ブラウザーシミュレーターが含まれます。

GoogleChromeでモバイルブラウザエミュレータを有効にする方法

ヒント：^(TIP:)残念ながら、CTRL + Shift + Mキーボードショートカットは、開発者ツールを有効にした後でのみ使用できます。

テストするサイトをナビゲート^(Navigate)し、さまざまなスマートフォンとタブレットを切り替えて、どのように表示されるかを確認します。完了したら、Google Chromeの開発者ツールの右上隅にあるX（閉じる）ボタンを押して、標準のデスクトップブラウジングモードに戻ります。^{(X (Close))}

モバイルブラウザエミュレーターGoogleChromeを閉じる^{(Google Chrome)}

ヒント：^(TIP:)Google Chromeのヘビーユーザーの場合は、GoogleChromeのメディア制御オプションの使用方法^{(how to use Google Chrome’s media control options)}も学習することをお勧めします。

MozillaFirefoxでモバイルブラウザエミュレータをオンにして使用する方法

Mozilla Firefoxで、モバイルブラウザシミュレータを使用するサイトを開きます。次に、キーボードのCTRL + Shift + Mを押すか、右上隅のハンバーガーボタンをクリックしてFirefoxのメニューを開き、[ Web開発者^{(Web Developer)}]を選択します。

Firefoxの^(Firefox)Web開発^{(Web Developer)}ツールにアクセスする

Web開発者に役立つツールでいっぱいのメニューが表示されます。リストで「レスポンシブデザインモード」を選択すると、この特定のWebページの表示モードが^{(“Responsive Design Mode,”)}Firefoxに読み込まれます。

Firefoxで^(Firefox)レスポンシブデザインモード^{(Responsive Design Mode)}を選択する

Firefoxはレスポンシブデザインモード^{(Responsive Design Mode)}を有効にします。ウィンドウの上部に、このエミュレーションモードで使用されるパラメーターが表示されます。デバイスが選択されていない場合は、[レスポンシブ^(Responsive)]をクリックまたはタップして、エミュレーションに使用できるデバイスを含むドロップダウンリストを開き、シミュレートするデバイスを選択します。

多くのiPhone、iPad、Kindle Fire（Firefoxはこのエミュレーションオプションを提供する唯一のブラウザーです）、およびSamsungGalaxyS9デバイスのモバイルブラウザーをシミュレートできます。

Firefoxでモバイルブラウザエミュレータを使用する

スマートフォンブラウザエミュレータでのテストが終了したら、 Mozilla Firefoxの右上隅にあるX（レスポンシブデザインモードを閉じる）^{(X (Close Responsive Design Mode))}ボタンを押します。

Firefoxでモバイルブラウザエミュレータを閉じます

標準のデスクトップブラウジングモードに戻ります。

MicrosoftEdgeでモバイルブラウザエミュレータをオンにして使用する方法

MicrosoftEdgeはGoogleChrome^{(Microsoft Edge)}と^{(Google Chrome)}同じレンダリングエンジンを使用し、同じスマートフォンブラウザエミュレーターを提供します。それらにアクセスするには、テストするWebサイトにアクセスし、キーボードのCTRL + SHIFT + Iキーを押すか、 Microsoft Edgeの右上隅にある3つの水平ドット（ 「設定など」^{(“Settings and more”)} ）をクリックします。表示されるメニューで、[その他のツール^{(More tools)}] 、 [開発者ツール^{(Developer Tools)}]の順に移動します。

MicrosoftEdgeの^{(Microsoft Edge)}開発者^(Developer)ツールにアクセスする

「デバイスエミュレーションの切り替え」^{(“Toggle device emulation”)}ボタン（タブレットの横にあるスマートフォンのように見えます）をクリックするか、キーボードのCTRL + Shift + Mを押します。これにより、モバイルブラウザエミュレータツールバーがアクティブになります。デフォルトでは、ロードしたサイトのレスポンシブ^(Responsive)テンプレートを使用します。それをクリック^(Click)して、エミュレートするモバイルデバイスを選択します。オプションには、 GoogleChrome^{(Google Chrome)}と同じスマートフォンとタブレットが含まれます。

MicrosoftEdgeでモバイルブラウザーエミュレーターにアクセスします

テストするサイトを参照し、さまざまなモバイルデバイス間で変更して、どのように表示されるかを確認します。完了したら、Microsoft Edgeの右上隅にあるX（閉じる）ボタンを押します。^{(X (Close))}

MicrosoftEdgeでモバイルブラウザーエミュレーターを閉じます

これで、標準のデスクトップブラウジングモードに戻ります。

Operaでモバイルブラウザエミュレータをオンにして使用する方法

Operaで、モバイルデバイスを使用しているかのように表示するWebページにアクセスします。次に、左上のOperaアイコンをクリックします（ ^(Opera)「Operaのカスタマイズと制御」^{(“Customize and control Opera”)}）。開いたメニューで、[開発者]、[開発者ツール]の順に選択^(Developer)し^{(Developer tools)}ます。キーボードを使用したい場合は、CTRL+Shift+Iキーを押して同じ結果を得ることができます。

Operaの開発ツールにアクセスする

開発者ツール^{( Developer tools)}は、ブラウザウィンドウの右側に表示されます。「デバイスツールバーの切り替え」^{(“Toggle device toolbar”)}ボタン（タブレットの横にあるスマートフォンのように見えます）をクリックするか、キーボードのCTRL + Shift + Mを押します。デバイスツールバーは左側に表示されます。デフォルトでは、ロードしたサイトのレスポンシブ^(Responsive)テンプレートを使用します。それをクリック^(Click)して、オプションのリストからエミュレートするモバイルデバイスを選択します。Operaは、同じレンダリングエンジン（ Chromium^(Chromium) ）に基づいているため、GoogleChromeおよびMicrosoftEdgeと同じモバイルブラウザエミュレータを提供します。

Operaでモバイルブラウザエミュレータにアクセスする

テストが終了したら、右上隅にあるX（閉じる）ボタンを押して、標準のデスクトップブラウジングモードに戻ります。^(Close)

Operaでモバイルブラウザエミュレータを閉じます

利用可能なモバイルブラウザエミュレーションオプションに満足していますか^(Are)？

これで、お気に入りのWebブラウザであらゆる種類のモバイルデバイスをエミュレートする方法がわかりました。ただし、ほとんどのWebブラウザーは、iPhoneおよびiPadに適した同じエミュレーションオプションを提供していることに気付くかもしれません。最新のAndroid^(Android)スマートフォンまたはタブレットをエミュレートしたい場合は、Androidの背後にある会社によって開発されたブラウザであるGoogleChromeでも可能性はかなり低くなります。最良の結果が必要な場合は、このタスクに2つのブラウザー（ChromeとFirefox、またはFirefoxとEdgeまたはOpera ）を使用する必要がある場合があります。行く前に、利用可能なオプションについてどう思うか教えてください。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera -

Do you need tо access a smartphone browser emulаtor on your PC to test the mobile versіon of а webѕite you are interested in? Maybe you are a web developеr, or you want to become one, and you need to simulate а mobile browser for the project уou arе working on. Regardless of your reasons, here is how to access a mobile browser emulator in Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera:

How to turn on and use the mobile browser emulator in Google Chrome

In Google Chrome, navigate to the website that you want to view in the mobile browser emulator. Then, either press the CTRL + SHIFT + I keys on your keyboard or, with the mouse, click the three vertical dots in the top-right corner to open the “Customize and control Google Chrome” menu. Choose More tools, followed by Developer Tools.

Access Developer Tools in Google Chrome

Click or tap on the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the device toolbar where the mobile page is loaded. By default, the device toolbar uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC.

How to enable the mobile browser emulator in Google Chrome

TIP: Unfortunately, you can use the CTRL + Shift + M keyboard shortcut only after enabling the developer tools.

Navigate the site you want to test, switch between the different smartphones and tablets, and see how it looks. When you are done, press the X (Close) button in the top-right corner of Google Chrome’s developer tools to get back to the standard desktop browsing mode.

Closing the mobile browser emulator Google Chrome

TIP: If you are a heavy Google Chrome user, you may also want to learn how to use Google Chrome’s media control options.

How to turn on and use the mobile browser emulator in Mozilla Firefox

In Mozilla Firefox, open the site for which you want to use a mobile browser simulator. Then, either press CTRL + Shift + M on your keyboard or click the burger button on the top-right corner to open Firefox’s menu, and choose Web Developer.

Access the Web Developer tools in Firefox

You see a menu filled with tools that are useful to web developers. In the list, select “Responsive Design Mode,” and this particular mode of viewing a web page is loaded in Firefox.

Choose the Responsive Design Mode in Firefox

Firefox enables the Responsive Design Mode. At the top of the window, you see the parameters used by this emulation mode. If no device is selected, click or tap on Responsive to open a drop-down list with devices available for emulation, and then choose the one that you want to simulate.

You can simulate the mobile browser for many iPhones, the iPad, the Kindle Fire (Firefox is the only browser to offer this emulation option), and Samsung Galaxy S9 devices.

Use the mobile browser emulator in Firefox

When you’re done testing with the smartphone browser emulator, press the X (Close Responsive Design Mode) button on the top-right corner of Mozilla Firefox.

Close the mobile browser emulator in Firefox

You are back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Microsoft Edge

Microsoft Edge uses the same rendering engine as Google Chrome and offers the same smartphone browser emulators. To access them, visit the website that you want to test, and either press the CTRL + SHIFT + I keys on your keyboard or click the three horizontal dots (“Settings and more”) in the top-right corner of Microsoft Edge. In the menu that appears, go to More tools and then to Developer Tools.

Access the Developer tools in Microsoft Edge

Click the “Toggle device emulation” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the mobile browser emulator toolbar. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include the same smartphones and tablets as Google Chrome.

Access the mobile browser emulator in Microsoft Edge

Browse the site you want to test, change between the different mobile devices, and see how it looks. When you are done, press the X (Close) button in Microsoft Edge’s top-right corner.

Close the mobile browser emulator in Microsoft Edge

You are now back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Opera

In Opera, visit the web page that you want to view as if you were using a mobile device. Then click the Opera icon on the top-left (“Customize and control Opera”). In the menu that opens, choose Developer followed by Developer tools. If you prefer the keyboard, press the CTRL+Shift+I keys for the same result.

Access the Developer tools in Opera

The Developer tools are displayed on the right side of the browser window. Click the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. The device toolbar is shown on the left. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate from the list of options. Opera offers the same mobile browser emulators as Google Chrome and Microsoft Edge, as it is based on the same rendering engine (Chromium).

Access the mobile browser emulator in Opera

When you are done testing, press the X (Close) button in the top-right corner to get back to the standard desktop browsing mode.

Close the mobile browser emulator in Opera

Are you happy with the mobile browser emulation options available?

Now you know how to emulate all kinds of mobile devices in your favorite web browser. However, you might notice that most web browsers offer the same emulation options that favor iPhones and iPads. If you want to emulate a modern Android smartphone or tablet, your chances are pretty slim, even in Google Chrome - the browser developed by the company behind Android. If you want the best results, you might need to use two browsers for this task: Chrome and Firefox, or Firefox and Edge or Opera. Before you go, tell us what you think about the available options.

Related posts

• Chrome、Firefox、Microsoft Edge、およびOperaでタブをミュートする方法

• すべての主要ブラウザで広告なしで記事を印刷する方法

• タスクバーへのウェブサイトまたはWindows 10でStart Menuを固定する方法

• Chrome Windows 10のdefault browser（Firefox & Opera）

• default browserをWindows 11で変更する方法

• Chrome、Firefox、Edge、およびOperaのサードパーティ製クッキーをブロックする方法

• Google ChromeをDark Modeに入れる方法

• Chrome、Firefox、Edge、およびOperaにプロキシサーバーを設定する方法

• InPrivate and Incognitoについて。プライベートブラウジングは何ですか？ Which browserは最高ですか？

• Android（Chrome、Firefox、Opera、Samsung Internet）でCookieをクリアする方法

• 5MicrosoftEdgeを他のWebブラウザよりも悪いWebブラウザにする問題

• Windows、MACOS、Android、およびIOSのChromeのsearch engineを変更する方法

• Microsoft Edge Collectionsの使い方

• GoogleChromeでWindows10のタイムラインを使用する方法

• Chrome、Firefox、Opera、MicrosoftEdgeからLastPassにパスワードをインポートする方法

• ブラウザがプライベートブラウジングを改善する7つの方法（シークレット、InPrivateなど）

• Put Chrome全画面（Edge、Firefox、およびOpera）の他のブラウザ

• Chrome64ビットまたはChrome32ビット：Windows 10以前の場合は、必要なバージョンをダウンロードします

• すべての主要なWebブラウザでJavaを有効にする方法

• Chrome、Firefox、Edge、およびOperaのincognitoへの行き方