デスクトップブラウザでモバイルビューのページをすばやく開くにはどうすればよいですか。
私たちは今やモバイルを中心とした世界にいるので、携帯電話やエミュレートされた携帯電話でウェブサイトを簡単にテストできることがますます重要になっています。私はウェブサイトやソーシャルメディア製品に取り組んでいる人々と共同作業をしており、彼らのデスクトップブラウザからウェブサイトをモバイルビューで定期的に開くことを奨励したいと思います。私は特にブラウザが提供する他のすべての開発者ツールの間で隠されているブラウザの組み込みの「モバイルビュー」機能について考えています、しかし私はちょうどセットアップするのと同じくらい速いものを考慮してうれしいです。
デスクトップブラウザから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
また、開発者用ツール（[その他のツール]、[開発者ツール]）を開き、[デバイスツールバーの切り替え]テーブルの前にある携帯電話のようなアイコンをクリックしてもメニュー項目を見つけることができます。
サファリ：
Appleがレスポンシブデザインモードに入るためのキーボードショートカットをデフォルトで無効にしているようです。あなたは従うことができます それのためのキーボードショートカットの設定に関するこのチュートリアル 。
メニュー項目を見つけるには、[開発]、[レスポンシブデザインモードに入る]の順にクリックします。 「現像」メニュー項目が表示されない場合は、「環境設定」、「詳細設定」を開き、「メニューバーに現像メニューを表示」をクリックして有効にする必要があります。
端：
- 押す F12 開発者ツールを開く Ctrl+7 エミュレーションタブを開きます。エミュレートしたいデバイスを設定します。
Webページ内を右クリックして[要素の検査]を選択すると、マウスを使用して開発者ツールを開くことができます。
Flimmの答え は100％正しいです。ショートカットを覚えておくのが面倒な場合に備えて、Webビューとモバイル/タブレットビューを切り替えるには、開発者ツールのこの青いボタンをクリックします。
またはFirefoxの場合：
デバイスツールバーを有効にした後、ドロップダウンメニューからエミュレートしたいデバイスの製造元とモデルを選択できます。
テストの目的で、私は以下のウェブサイトを使用します： -
上記のどちらのサイトでも、自分のWebアプリケーションを複数のデバイス幅で表示することができます。
あなたのブラウザに "user agent switcher"エクステンションを追加し、モバイルユーザーエージェントを指定してください。ウェブサイトがスマートであれば、モバイルに最適化されたバージョンになります。
特定の拡張子は推奨しません。理想的なのは、組み込みのモバイルブラウザのプリセットと、Webサイトごとにユーザーエージェントの切り替えを有効または無効にする機能です。
上記の答えは、単一のブラウザを使いたい場合、またはデスクトップの「ワークスペース」が限られている場合（たとえば、低解像度でシングルモニタが21インチ未満の場合）に最適です。
私が最近発見したさらに興味深い解決策が実際にあります。 https://blisk.io/
私は個人的な利益のために（一種の）「アフィリエイトリンク」を使うことを控えます（無料の「チームクラウドスペース」や「プレミアム機能」のようなものを得るためにクレジットを得ることができる「トークンベースのシステム」がありますしかし、ブリスクは実際にかなりおしゃべりです。
このChromiumベースの「開発用ブラウザ」は、Chrome開発者向けツールのデフォルトが右側の縦の列になっているのと同じように、左側に縦の「ペイン」を持つさまざまなデバイスでページをデモするための多数の方法を提供します。
それは一見の仕事です。 「フリーミアム拡張機能」にはいくつかの制限がありますが、それでも横並びの比較であなたのページ/サイトのPC版とモバイル版の両方を「プレビュー」するのに非常にうまく機能します。あなたが遠隔地のチームで仕事をしている場合、有料機能もかなりラッドに思えます（私は個人的に月額の費用で人々を夢中にさせる前にそれはより良い「試乗」プログラムを必要とすると思います）。
完全な情報開示：モバイルプレビュー部分には1日あたりの非常に煩わしい「時間制限」があります（アイコンからアドレスバーの右側への開閉を切り替えます - 「デバイスプレビュー」を小さなリンクから変更します右上隅のメニュー "デバイスリストの表示"）。
また、私はChrome/Firefoxの2つの異なる「User-Agent Switcher」のような、ブラウザ拡張を使ったいくつかの巧妙なトリックを見つけました。さまざまなオペレーティングシステムのブラウザのユーザーエージェント文字列を切り替えることができます。それらのためのブラウザ。
私は "esolutions.se"フレーバーを好みます。カスタムユーザエージェント文字列をあなたが望む限り多くのカスタマイズのためにリストに追加するのがとても簡単だからです（オフラインでも動くので、ある場合には便利です）： https://chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae
とにかく、それは私の2セントです。 ：P