iPhone、Android、Galaxyなどスマートフォン向けにサイトを作成した場合にスマートフォンが手元にあればそれを使いレイアウトを確認できますが、スマートフォンがない場合でもパソコンからレイアウトは確認することは出来ます。Google Chromeやアップル – Safariで簡単に確認することが出来ますので、その方法を紹介します。
Google Chromeでパソコンでスマートフォン画面を確認する
Google Chromeブラウザをインストールして、ブラウザをAndroid Mobileとして表示できるように設定します。
Google Chromeでインターネットを開いたらブラウザ内で右クリックをすると下記図のようにメニューが現れますので、そこで「Developer Tools」をクリックします。
すると下記図のようにDeveloper Toolsが開きますのでそこで右下にあるSettingをクリックします。
Settingでは「Overrides」をクリックして「User Agent」にチェックマークをします。ここではスマートフォン画面を確認するので「Chrome-Android Mobile」を選択します。
ここまで出来たらキーボードの「F5」キーを押して更新してください。すると下記のようにスマートフォン画面を確認する事が出来ます。
アップル – Safariでパソコンでスマートフォン画面を確認する
アップル – Safari ブラウザをインストールして、ブラウザをiphoneタイプとして表示できるように設定します。
下記の図のように設定をクリックします。
メニューバーに開発メニューを表示にチェックを入れます。
下記の図のようにメニュー表示をクリック→開発→ユーザエージエント→Mobile Safari○○-iphone(このバージョンや機種はお好みで)選び設定します。
次にアドレスを入力してサイトを表示させるんですが、通常通りにコピーしたアドレスを貼り付けただけではサイトが表示されませんでした・・・何か設定する方法があるとは思うんですけど・・・そこで下記図のようにアドレスを貼り付けた後に何か文字を入力して、その文字を削除してEnterを押せばサイトに移動できます。
サイトが表示できたらブラウザの縮小をクリックしてさらにブラウザをドラッグして最小限まで幅を縮小するとスマートフォンサイズのレイアウトで表示されます。
Google Chromeやアップル – Safariの両方で確認は出来ますが、個人的な意見だとGoogle Chromeの方が簡単で便利のような気がします。
最終更新日: 2013年3月22日
良い記事をありがとうございました!!
助かりました!!!
コメントありがとうございます。 お役に立ててよかったです。
ピンバック: スマートフォンの表示をPC(パソコン)で見る方法:Safariブラウザ | WebCus!
ピンバック: WordPressサイトをスマートフォン表示へ対応させるためにやったこと