GoogleブラウザChrome（クローム）で、モバイル環境（iPhone・スマートフォン）を仮想表示してチェックする方法

おすすめ記事ピックアップ

GoogleブラウザChrome（クローム）には、iPhoneやスマートフォンなどでサイト見た場合、どのように表示されるのか仮想で表示する機能がついています。完全に同じようにモバイルサイトを表示する訳では無いのですが、結構便利な機能なんです。

簡易的にモバイルでホームページを表示した場合、どのように表示されるのかチェックするのに最適です。実際のモバイルサイトとは、微妙に表示が異なるので、最終的にはiPhoneやスマートフォンでチェックしましょう。

まずChrome（クローム）で、対象のサイトを表示させます。

右クリックを押して、「要素の検証」を選択します。

コードが下に表示されますので、右下にある歯車をクリックします。

【拡大】この歯車アイコンをクリックします。

設定画面が開かれます。左側を設定します。

Enableにチェックを入れます。Enable on DevTools startupにもチェックを入れます。UserAgentにもチェックを入れて、確認したいブラウザーやモバイル端末を選択します。

そうすると仮想的にですが、モバイル環境で見た時の表示がブラウザー上に出てきます。簡単な注意事項がいくつかあります。

画面表示が切り替わった後、かならず更新しましょう。レスポンスが優先されて、モバイルサイトが表示されないことがあります。更新するとモバイルサイトが表示されます。

設定画面を閉じると、モバイル表示も消えてしまいます。もう一度表示させたいときは、要素の検証を選択しましょう。またモバイル表示を解除したい時は、設定に入り、Enable on DevTools startupにもチェックを外しましょう。