パソコンでスマートフォン画面を確認する

パソコンでスマートフォン画面確認

iPhone、Android、Galaxyなどスマートフォン向けにサイトを作成した場合にスマートフォンが手元にあればそれを使いレイアウトを確認できますが、スマートフォンがない場合でもパソコンからレイアウトは確認することは出来ます。Google Chromeアップル – Safariで簡単に確認することが出来ますので、その方法を紹介します。

Google Chromeでパソコンでスマートフォン画面を確認する

Google Chromeブラウザをインストールして、ブラウザをAndroid Mobileとして表示できるように設定します。

Google Chromeでインターネットを開いたらブラウザ内で右クリックをすると下記図のようにメニューが現れますので、そこで「Developer Tools」をクリックします。

Developer Tools選択

すると下記図のようにDeveloper Toolsが開きますのでそこで右下にあるSettingをクリックします。

Google Chrome setting

Settingでは「Overrides」をクリックして「User Agent」にチェックマークをします。ここではスマートフォン画面を確認するので「Chrome-Android Mobile」を選択します。

Chrome-Android Mobile

ここまで出来たらキーボードの「F5」キーを押して更新してください。すると下記のようにスマートフォン画面を確認する事が出来ます。

Google Chrome スマートフォン画面

アップル – Safariでパソコンでスマートフォン画面を確認する

アップル – Safari ブラウザをインストールして、ブラウザをiphoneタイプとして表示できるように設定します。

下記の図のように設定をクリックします。

設定

メニューバーに開発メニューを表示にチェックを入れます。

開発

下記の図のようにメニュー表示をクリック→開発→ユーザエージエント→Mobile Safari○○-iphone(このバージョンや機種はお好みで)選び設定します。

サファリの設定

次にアドレスを入力してサイトを表示させるんですが、通常通りにコピーしたアドレスを貼り付けただけではサイトが表示されませんでした・・・何か設定する方法があるとは思うんですけど・・・そこで下記図のようにアドレスを貼り付けた後に何か文字を入力して、その文字を削除してEnterを押せばサイトに移動できます。

アドレス入力

サイトが表示できたらブラウザの縮小をクリックしてさらにブラウザをドラッグして最小限まで幅を縮小するとスマートフォンサイズのレイアウトで表示されます。

Google Chromeアップル – Safariの両方で確認は出来ますが、個人的な意見だとGoogle Chromeの方が簡単で便利のような気がします。

最終更新日: 2013年3月22日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

パソコンでスマートフォン画面を確認するの関連記事

パソコンでスマートフォン画面を確認する” への4件のコメント

    • コメントありがとうございます。 お役に立ててよかったです。

  1. ピンバック: スマートフォンの表示をPC(パソコン)で見る方法:Safariブラウザ | WebCus!

  2. ピンバック: WordPressサイトをスマートフォン表示へ対応させるためにやったこと

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*