パソコンでスマホのブラウザ表示を確認する方法(Google Chrome Ver.33.0.1750.117 m)

 
パソコンでホームページを作っている人やブログを書いている人は、普段あまり意識しないのがスマートフォンでの表示イメージです。
スマートフォンの個人所有率が過半数を超えている状況を考えると無視できないことです。

最近のスマホの画面サイズは代表的なもので、iPhone5の4.0インチから Androidの主流である5.0インチ、大きいものでは6インチを超えるものもあり、サイズはさまざま。

自分のスマホで表示の確認、とはいっても、これだけサイズがあると確認しようがない!?

と思って、ググってみたら、パソコンのブラウザで、指定したスマホの画面サイズで疑似的に確認する方法がありました。

 

■疑似的に確認する方法は見つけたけれど・・・

私は、Google Chrome を使っているのですが、Chromeでは、デベロッパーツールを使えば確認できるみたい。

でも、ググってみた確認方法で設定をしていくと、手順に載っている画面レイアウトと違っている。
参照させてもらっているサイトの作成日付はわずか1か月前で バージョンも “32.0.1700.72 m”、私の Chrome のバージョンは “33.0.1750.117 m”で、かけはなれたバージョンでもないのに、ガラッとユーザーインターフェースが変わってしまった・・・。

スマホの画面サイズに設定するには、どうやればよいの?

いろいろ Chrome をいじっていたら、やっと発見!

 

■設定手順

Google Chrome “33.0.1750.117 m” で、スマホのブラウザ表示を確認する方法です。

1.スマホ表示させたいページで右クリック(クリック場所はどこでもOK)

右クリックメニューで “要素を検証(N)” をクリックします。

ブラウザ上にデベロッパーツールが表示されます。

2.デベロッパーツールの “Settings”アイコンをクリック

“Settings” がポップアップ表示されます。

3.”Show ‘Emulation’ view in console drawer.”をチェック

チェック後、”Settings” ポップアップ右上の×ボタンクリックし、ポップアップを閉じます。

 
4.コンソール表示アイコンをクリック

コンソールが表示されます。

5.コンソールメニューバーの EmulationボタンをクリックしDeviceリストを表示

 
6.デバイスを選択

Emulation(疑似表示)可能なスマホが表示されます。

今回は、私が持っている Xperia UL と同等の画面サイズ・解像度の “Sony Xperia Z, Z1” を選択しました。

7.”User Agent” の Emulationボタンをクリック

画面サイズはスマホっぽくなりましたが、表示イメージがパソコン表示のままです。

ページの再読み込みボタンをクリックするか、F5キーを押すと、表示イメージもスマホっぽくなります。
ちなみに、F5キーを押してもスマホイメージで表示されない場合は、Ctrlキーを押しながらF5キーを押してください。

8.ページの再読み込み

 
9.実機の表示は?

私が持っている Xperia UL での表示内容です。

パソコンのGoogle Chrome で Emulation(疑似表示)しても、ほぼイメージ通りに表示されたことが分かります。
ちなみに、Xperia UL で使っているブラウザは、同じGoogle Chromeです。

10.パソコンのブラウザ表示を元に戻す

表示をパソコン表示に戻す場合は、”User Agent” の Resetボタンをクリックし、ページの再読み込みを行います。

 
_/_/_/_/_/

 
Crome は Googleのブラウザですが、Emulation(疑似表示)可能なデバイスに、Apple の iPhone, iPad もリストされていました。
しかも、少し前のモデルから最新モデルまでリストされていました。
ホームページを作る人やブロガーにとって、ユーザー数の多い Apple製品での表示確認は必須ですね。

自分のホームページやブログが、スマートフォンで どう表示されているか見たことがない人はお試しください。

 
んだんだ

スポンサーリンク

 

コメントを残す

認証コード * Time limit is exhausted. Please reload CAPTCHA.


関連記事

携帯端末はどこへ?

  昨日、マイクロソフトがノキアの携帯電話部門を買収したと発表しました。 この買収・・・

記事を読む

学校の教科書もデジタル化

  光村図書出版、大日本図書、実教出版など教科書会社12社が、情報通信技術(ICT)を使・・・

記事を読む

ブルーライトをカットするPCメガネやアプリを紹介

  前回の記事「タブレットにおすすめのアクセサリーは持っていて損はしない」のなかで、「ブ・・・

記事を読む

IPAがスマホの紛失・盗難対策アプリの悪用に注意を呼びかけ!

  2014年4月に、元交際相手のスマートフォン(Android OS)に無断で「紛失・・・・

記事を読む

これからのシニアは電子書籍端末で快適に読書を楽めます

  「文字が読みづらくなった」「目が弱くなった」「老眼になった」など、眼に関する変化で大・・・

記事を読む

最新のIT情報の収集は登録と利用が無料のキーマンズネットがおすすめ

  ITは日々進化し、IT製品も新製品がどんどん市場に送り込まれています。 毎日、・・・

記事を読む

ロケットもモバイル化?

  イプシロンの打ち上げが成功しました。 今日14日午後2時、鹿児島県肝付(きもつ・・・

記事を読む

スポンサーリンク

 

デル株式会社

  • 運営者のNORIBOです。
    おじさんITエンジニア。
    妻、子供二人、実母の5人家族です。

    このブログについては コチラ
    詳細プロフィールは コチラ
    お問い合わせは コチラ

     

    日本アフィリエイト協議会ロゴ

follow us in feedly   follow me

 

軽自動車税にもエコカー減税!2015年4月から軽自動車税はこう変わる!

  軽自動車を持つユーザーさんが毎年納税する「軽自動車税」・・・

花粉症の季節到来!注目の花粉対策グッズでシッカリ対策!

  2015年、スギ花粉の季節がやってきました。今年のスギ・・・

花粉症の季節!イオン発生機で車内の空気もキレイに浄化!

  花粉症の季節、クルマのなかは、意外と花粉が多く浮遊して・・・

ドライバーの飛距離をアップする!肩甲骨の可動域を広げるストレッチのメモ!

  ゴルフのドライバーの飛距離アップには「肩甲骨の可動域を・・・

冬ゴルフのティーアップは置くだけの『put tee』が便利!

  先日、ゴルフ仲間と宮城県白石市にある『仙台グリーンゴル・・・

スポンサーリンク

 

【中古車のガリバー】スマホで中古車購入

 

 

  •  

 

レビューポータル「MONO-PORTAL」
PAGE TOP ↑