私たちは今やモバイルファーストの世界にいるので、携帯電話またはエミュレートされた携帯電話でウェブサイトを簡単にテストできることがますます重要になっています。私はウェブサイトやソーシャルメディアの提供に携わっている人々と協力しており、モバイルビューでデスクトップブラウザからウェブサイトを定期的に開くことを奨励したいと思います。ブラウザーに組み込まれている「モバイルビュー」機能について具体的に考えています。この機能は、ブラウザーが提供する他のすべての開発者ツールに隠されていることがよくありますが、セットアップが簡単なものであれば何でも検討できます。

デスクトップブラウザからWebサイトのモバイルビューを開くにはどうすればよいですか？

Firefox：

• Windows / Linuxでは、Ctrl+ Shift+を押しますM
• macOSでは、option+ command+を押しますM

（「ツール」）、「Web開発者」、「レスポンシブデザインモード」の下にメニュー項目があります。

クロム：

最初に「開発ツール」を開いておく必要があります。

• Windows / Linuxでは、Ctrl+ Shift+ IまたはF12
• macOSでは、option+ command+を押しますI

開発者ツールを開いて集中すると、デバイスツールバーを開くことができます。

• Windows / Linuxでは、Ctrl+ Shift+を押しますM
• macOSでは、command+ shift+を押しますM

また、開発者ツール（「その他のツール」、「Develeporツール」）を開いて、メニュー「Toggle device toolbar」の前にある携帯電話のようなアイコンをクリックしてメニュー項目を見つけることもできます。

サファリ：

Appleは、レスポンシブデザインモードに入るためのキーボードショートカットをデフォルトで無効にしているようです。このチュートリアルに従って、キーボードショートカットを設定できます。

[開発]、[レスポンシブデザインモードの開始]の順にクリックすると、メニュー項目を見つけることができます。「開発」メニュー項目が表示されない場合は、「設定」、「詳細」を開き、「メニューバーに開発メニューを表示」にチェックマークを付けて有効にする必要があります。

縁：

• を押しF12て開発者ツールを開き、次にCtrl+ 7を押して[エミュレーション]タブを開きます。エミュレートするデバイスを構成します。

マウスを使用してWebページ内を右クリックし、「要素を検査」を選択することにより、開発者ツールを開くことができます。

Flimmの答えは100％正しいです。ショートカットを覚えるのが面倒すぎる場合に備えて、Webビューとモバイル/タブレットビューを切り替えるのは、開発者ツールのこの青いボタンです。

またはFirefoxの場合：

デバイスツールバーを有効にしたら、エミュレートするデバイスのメーカーとモデルをドロップダウンメニューから選択できます。

テストの目的で、次のWebサイトを使用します。

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

上記の両方のサイトでは、複数のデバイス幅でWebアプリケーションを表示できます。

ブラウザに「ユーザーエージェントスイッチャー」拡張機能を追加し、モバイルユーザーエージェントを指定します。ウェブサイトが十分にスマートであれば、モバイル向けに最適化されたバージョンを提供します。

特定の拡張機能はお勧めしません。理想的なのは、組み込みのモバイルブラウザ用のプリセットと、Webサイトごとにユーザーエージェントの切り替えを有効または無効にする機能があることです。

上記の回答は、単一のブラウザに固執したい人や、デスクトップの「ワークスペース」が限られている人（例えば、低解像度で21インチ未満の単一モニタ）に最適です。

実際、私が最近発見したさらに興味深いソリューションがあります：https : //blisk.io/

個人的な利益のために（アフィリエイトリンク）を使用することは控えます（無料の「チームクラウドスペース」や「プレミアム機能」などを使用してクレジットを獲得できる「トークンベースのシステム」がありますそれ）、しかしBliskは実際にはかなりおしゃれです。

このChromiumベースの「開発用に構築されたブラウザ」は、Chrome Developer Toolsがデフォルトの右側の縦列にあるように、左側に縦の「ペイン」があるさまざまなデバイスでページをデモする方法を多数提供します。

それは一見の仕事です。「フリーミアム拡張機能」にはいくつかの制限がありますが、ページ/サイトのPCバージョンとモバイルバージョンの両方を並べて比較して「プレビュー」するには非常にうまく機能します。有料の機能は、リモートチームで作業している場合も非常に優れているように見えます（個人的には、月々の費用を負担する前に、より良い「テストドライブ」プログラムが必要だと思います）。

完全な開示：モバイルプレビューパーツには1日あたり非常に迷惑な「時間制限」があります（アドレスバーの右側のアイコンから開閉を切り替えます。「デバイスプレビュー」を小さなリンクから右上のメニュー「デバイスリストを表示」）。

BliskDemoScreenshot

また、Chrome / Firefoxの2つの異なる「ユーザーエージェントスイッチャー」などのブラウザー拡張機能で、さまざまなオペレーティングシステムのブラウザーユーザーエージェント文字列を切り替えることで、さらに高度なトリックをいくつか見つけました。それらのブラウザ。

「esolutions.se」フレーバーが好きです。これは、カスタムユーザーエージェント文字列を必要なだけカスタマイズできるようにリストに追加するのが非常に簡単だからです（オフラインでも実行できます。これは特定の場合に便利です）： https： //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

とにかく、それは私の2セントです。：P