今はモバイル ファーストの世界なので、携帯電話やエミュレートされた携帯電話で Web サイトを簡単にテストできることがますます重要になっています。私は Web サイトやソーシャル メディア サービスに携わる人々と協力し、デスクトップ ブラウザーからモバイル ビューで Web サイトを定期的に開くように勧めています。具体的には、ブラウザーに組み込まれている「モバイル ビュー」機能について考えています。この機能は、ブラウザーが提供する他のすべての開発者ツールの中に隠れていることが多いのですが、同じように簡単にセットアップできるものであれば何でも検討します。
デスクトップ ブラウザから Web サイトのモバイル ビューを開くにはどうすればよいですか?
答え1
ファイアフォックス:
- Windows/Linuxでは、Ctrl+ Shift+を押します。M
- macOSでは、option+ command+を押しますM
メニュー項目は、「ツール」、「Web 開発者」、「レスポンシブ デザイン モード」の下にもあります。
Chrome と Edge:
まず「開発者ツール」を開く必要があります。
- Windows/Linuxでは、Ctrl+ Shift+を押すIか、F12
- macOSでは、option+ command+を押しますI
開発者ツールが開いてフォーカスされると、デバイス エミュレーションを切り替えることができます。
- Windows/Linuxでは、Ctrl+ Shift+を押します。M
- macOSでは、command+ shift+を押しますM
キーボード ショートカットを押すのではなくボタンをクリックしたい場合は、開発者ツール ツールバーにデバイス エミュレーションを有効にする小さなボタンがあります。
サファリ：
Appleはレスポンシブデザインモードに入るためのキーボードショートカットをデフォルトで無効にしているようです。キーボードショートカットの設定に関するこのチュートリアル。
メニュー項目は、「開発」、「レスポンシブ デザイン モードに入る」をクリックすると見つかります。「開発」メニュー項目が表示されない場合は、「環境設定」、「詳細」を開いて、「メニュー バーに開発メニューを表示する」にチェックを入れて有効にする必要があります。
答え2
フリムの答え100% 正しいです。ショートカットを覚えるのが面倒な場合は、開発者ツールのこの青いボタンで Web ビューとモバイル/タブレット ビューを切り替えることができます。
または Firefox の場合:
デバイス ツールバーを有効にした後、ドロップダウン メニューからエミュレートするデバイスのメーカーとモデルを選択できます。
答え3
テストの目的で、次の Web サイトを使用します:-
上記の両方のサイトでは、Web アプリケーションを複数のデバイス幅で表示できます。
答え4
ブラウザに「ユーザーエージェントスイッチャー」拡張機能を追加し、モバイルユーザーエージェントを指定します。ウェブサイトが頭いい十分にモバイルに最適化されたバージョンが提供されます。
特定の拡張機能は推奨しません。理想的な拡張機能は、モバイル ブラウザー用のプリセットが組み込まれており、Web サイトごとにユーザー エージェントの切り替えを有効または無効にする機能を備えている必要があります。