Web開発者であるか、オンラインビジネスを所有している場合は、モバイルサイトがデスクトップ上でどのように表示されるかを知りたいと思うかもしれません。インターネットトラフィックの半分以上が電話からのものであるため、モバイルサイトの外観と機能が重要になる可能性があります。視覚的に魅力的なサイトであれば、顧客はサイトに長く滞在したり、何かを購入したりする可能性が高くなります。デスクトップビューは、編集を行い、発生する可能性のある問題をより早く修正するのにも役立ちます。
幸い、これは比較的簡単なプロセスです。この記事では、さまざまなデバイスやブラウザでモバイル版のウェブサイトを表示する方法を紹介します。
MacのChromeでモバイル版のウェブサイトを表示する方法
Chromeでは、DevToolsと呼ばれる組み込みの開発者ツールを使用して、フロントエンドをテストし、ウェブサイトのすべてのコンポーネントが正しく動作しているかどうかを確認できます。 DevToolsは事前定義されたデバイスの選択肢を提供するため、開発者が開発者の拡張機能なしでビューをデスクトップからモバイルに、またはその逆に迅速にシフトするための最良の方法です。
必要に応じて画面サイズを変更したり、画面の幅と高さを調整して、さまざまな画面サイズでWebサイトがどのように表示されるかを確認することもできます。 Macでこれを行うには、次の手順に従います。
- Google Chromeブラウザを起動し、表示するサイトに移動します。
- キーボードのF12を押して、DevToolsにアクセスします。
- モードがオンになったら、[デバイスエミュレーションの切り替え]アイコンをクリックします。
- iOSおよびAndroidデバイスのリストから選択して、それらをエミュレートできます。
- 選択したモバイルフォームでウェブサイトが表示されます。
終了したら、開発者ツールウィンドウを閉じて、モバイル版のWebサイトを閉じます。
WindowsPCのChromeでモバイル版のWebサイトを表示する方法
ChromeのWindowsPCでモバイル版のウェブサイトを表示する場合は、非常によく似たプロセスです。
- Chromeブラウザを開きます。
- Chromeで、モバイル版で表示したいWebサイトにアクセスします。
- Webページを右クリックし、メニューから[検査]を選択します。
- 開発ツールに移動するには、[その他のツール]タブをクリックして[開発ツール]を選択するか、F12キーを押してDevToolsを開きます。
- 開発ツールウィンドウが開きます。
- [デバイス切り替え]アイコンをクリックして、モバイルサイト表示モードに切り替えます。
- エミュレートするモバイルデバイスを選択します（オプション）。
- これで、ニーズに合わせて画面のサイズを変更できます。
ChromebookでChromeのモバイル版のウェブサイトを表示する方法
Chromebookを使用してChromeでモバイル版のウェブサイトにアクセスする方法は、最初の2つの方法と非常によく似ています。
- GoogleChromeウェブブラウザを開きます。
- モバイルデバイスでアクセスするウェブページを開きます。
- メニューにアクセスするには、縦の3つのドットアイコンをクリックします。
- リスト内の[その他のツール]項目にマウスをドラッグします。
- 開発者ツールを選択します。
- ブラウザの[開発者ツール]ウィンドウが開きます。
- [デバイス]切り替えアイコンをクリックして、モバイルサイトの表示モードを切り替えます。
これにより、モバイルサイトのユーザーインターフェイスが表示されます。ドロップダウンボックスからメーカーとモデルを選択して、好みのデバイスエクスペリエンスを選択することもできます。開発者ツールコンソールを閉じるたびに、Webページがデスクトップサイトとして更新されます。
MacのFirefoxでモバイル版のWebサイトを表示する方法
Firefoxなどの他のWebブラウザを使用して、Macデスクトップでモバイルサイトを表示できます。ブラウザウィンドウのサイズ変更は、ほとんどのWeb開発者がレスポンシブデザインWebサイトを評価するために使用する方法の1つです。ただし、ほとんどの場合、この代替手段は受け入れられないように見えます。
そこで、FirefoxブラウザのWeb開発機能が役に立ちます。 Firefoxでモバイル版のWebサイトにアクセスする方法を知っている場合は、複数の解像度でWebページを閲覧できます。次の手順を実行します：
- 見たいウェブサイトのモバイル版を開きます。
- Webページを右クリックして、メニューから[検査]オプションを選択します。
- レスポンシブデザインモードを選択します。
- Webサイトの画面サイズを選択します。
WindowsPCのFirefoxでモバイル版のWebサイトを表示する方法
Windows PCには、Firefoxを使用してモバイル版のWebサイトを表示するオプションもあります。その方法は次のとおりです。
- PCでFirefoxを起動します。
- モバイル版として表示したいWebサイトにアクセスします。
- 水平の3本のバーのアイコンをクリックして[設定]に移動します。
- ドロップダウンメニューが表示され、Web開発者オプションを選択する必要があります。
- レスポンシブデザインモードを選択します。
- 最後に、スマートフォンモデルを選択して、そのデバイスでサイトがどのように表示されるかを確認できます。
MacのSafariでモバイル版のWebサイトを表示する方法
ChromeとFirefoxを使用してデスクトップでモバイルウェブサイトを表示する方法について説明しました。しかし、Macデバイスに付属しているデフォルトのブラウザであるSafariについてはどうでしょうか。幸いなことに、Safariでモバイル版のWebサイトを表示することもできます。
- Safariブラウザを起動します。
- モバイル版として表示したいWebサイトにアクセスします。
- [オプション]をクリックしてから、[開発]メニューをクリックします。
- ドロップダウンメニューから、[レスポンシブデザインモードに入る]を選択します。
- これで、モバイル版のWebサイトを表示できます。
追加のFAQ
携帯電話でデスクトップ版のWebサイトを表示できますか？
答えはイエスです！モバイル版からデスクトップ版に切り替えて、パソコンを使わずにチェックアウトできます。 Chromeでモバイルバージョンをデスクトップバージョンに移行する手順は次のとおりです。
1.デスクトップビューで表示するWebサイトに移動します。
2. 3つのドットのアイコンをタップして、メニューにアクセスします。
3.ここで[デスクトップビュー]オプションを選択します。
これらの手順は、使用している電話によって異なる場合があることに注意してください。
スタートボタンでwindows10が開かない
モバイルWebデザインをより簡単にする
開発者ツールは、デバイスを切り替えることなく、デスクトップ上のWebサイトのモバイルバージョンを分析および変更するのに最適です。画面サイズを変更して、さまざまなデバイスでコンポーネントがどのように機能するかを確認できます。レスポンシブモードを使用して、さまざまなコンポーネントを調整し、複数の画面サイズのWebサイトを作成できます。
Webサイトを設計するとき、設計者は、サイトのフロントエンドが電話、タブレット、およびデスクトップでどのように表示されるかを常に念頭に置く必要があります。この記事で説明されている方法を使用すると、開発者がそうするのに役立ち、Webサイトのどのコンポーネントがそれらを修正するための問題を引き起こしているのかを特定するのにも役立ちます。
デスクトップでモバイル版のサイトを表示しようとしたことがありますか？そのためにどのブラウザを使用しますか？以下のコメントセクションでお知らせください。
