パソコンのWebブラウザでモバイルサイトを見る方法

スポンサーリンク
スポンサーリンク
グラフ

レスポンシブなWebデザインを作成した際など、パソコンからモバイルサイトを閲覧したくなる場面と言うのは多々あります。いちいちモバイルデバイスから確認するのも面倒ですが、昨今のWebブラウザにはモバイル画面を表示できる機能が搭載されています。

開発者ツールを活用する

Windowsで使用できる代表的なブラウザ『Internet Explorer 11』や『Firefox』『Chrome』には、Webサイトの開発を容易にする開発者ツールが備わっています。

ブラウザによって呼び名は異なりますが、IE11は『開発者ツール』、Firefoxは『開発ツール』、Chromeは『デベロッパーツール』と呼ばれています。

モバイルサイトを閲覧する手順

開発者ツールを起動するためには、どのブラウザでも同様にF12キーを押下します。するとそれぞれのブラウザで開発者ツールが起動します。

サイトの構造(造り)によっては正常に表示されないことがあるので注意してください。

Internet Explorer 11の場合

  1. 開発者ツールより『エミュレーション』をクリックします。

    Win10→IE11→開発者ツール

  2. “ブラウザープロファイル” を『Windows Phone』に、“ユーザーエージェント文字列” を『Windows Phone 10(任意)』に設定します。

    Win10→IE11→開発者ツール

Firefoxの場合

  1. 開発ツールより『レスポンシブデザインモード』をクリックします。

    Win10→Firefox→開発ツール

  2. レスポンシブデザインモードより『解像度』を選択します。

    Win10→Firefox→開発ツール

Chromeの場合

  1. デベロッパーツールより『Toggle device toolbar』をクリックします。

    Win10→Chrome→デベロッパーツール

  2. device toolbarより『デバイス』を選択します。

    Win10→Chrome→デベロッパーツール

パソコンのブラウザでモバイルサイトを閲覧するやり方は以上です。

使い勝手としては、主要なデバイスがプリセットされているChromeが使いやすくてオススメです。また、完全に互換性があるわけでは無いので、最終的には各種デバイスで確認することをオススメします。

スポンサーリンク

シェアする

おすすめ記事
おすすめ記事