おすすめ記事ピックアップ
GoogleブラウザChrome(クローム)には、iPhoneやスマートフォンなどでサイト見た場合、どのように表示されるのか仮想で表示する機能がついています。完全に同じようにモバイルサイトを表示する訳では無いのですが、結構便利な機能なんです。
簡易的にモバイルでホームページを表示した場合、どのように表示されるのかチェックするのに最適です。実際のモバイルサイトとは、微妙に表示が異なるので、最終的にはiPhoneやスマートフォンでチェックしましょう。
まずChrome(クローム)で、対象のサイトを表示させます。
右クリックを押して、「要素の検証」を選択します。
コードが下に表示されますので、右下にある歯車をクリックします。
【拡大】この歯車アイコンをクリックします。
設定画面が開かれます。左側を設定します。
Enableにチェックを入れます。Enable on DevTools startupにもチェックを入れます。UserAgentにもチェックを入れて、確認したいブラウザーやモバイル端末を選択します。
そうすると仮想的にですが、モバイル環境で見た時の表示がブラウザー上に出てきます。簡単な注意事項がいくつかあります。
画面表示が切り替わった後、かならず更新しましょう。レスポンスが優先されて、モバイルサイトが表示されないことがあります。更新するとモバイルサイトが表示されます。
設定画面を閉じると、モバイル表示も消えてしまいます。もう一度表示させたいときは、要素の検証を選択しましょう。またモバイル表示を解除したい時は、設定に入り、Enable on DevTools startupにもチェックを外しましょう。
簡易的にモバイルでホームページを表示した場合、どのように表示されるのかチェックするのに最適です。実際のモバイルサイトとは、微妙に表示が異なるので、最終的にはiPhoneやスマートフォンでチェックしましょう。
まずChrome(クローム)で、対象のサイトを表示させます。
右クリックを押して、「要素の検証」を選択します。
コードが下に表示されますので、右下にある歯車をクリックします。
【拡大】この歯車アイコンをクリックします。
設定画面が開かれます。左側を設定します。
Enableにチェックを入れます。Enable on DevTools startupにもチェックを入れます。UserAgentにもチェックを入れて、確認したいブラウザーやモバイル端末を選択します。
そうすると仮想的にですが、モバイル環境で見た時の表示がブラウザー上に出てきます。簡単な注意事項がいくつかあります。
画面表示が切り替わった後、かならず更新しましょう。レスポンスが優先されて、モバイルサイトが表示されないことがあります。更新するとモバイルサイトが表示されます。
設定画面を閉じると、モバイル表示も消えてしまいます。もう一度表示させたいときは、要素の検証を選択しましょう。またモバイル表示を解除したい時は、設定に入り、Enable on DevTools startupにもチェックを外しましょう。