アクセスアップ HOME > google > pcでスマホサイト閲覧 chrome編

pcでスマホサイト閲覧 chrome編

サイトやブログ、ホームページを制作していると、ある程度ブラウザによる表示の違いは意識しないといけません。

最近はすっかり標準ブラウザはchromeを利用してるんで、パソコンのクロームを利用してスマートフォンサイトやie,firefoxなどを見る方法のまとめ。


safariを利用しているとスマホサイトの閲覧は簡単です。
パソコンでスマホサイトを見る方法

ぼくの環境ではサファリを立ち上げるとcpu使用率が100%になってしまうため、最近はあまり利用してないです。


chromeの拡張機能を利用する


google chromeを利用して何かしたいことがあれば、chromeウェブストアで検索すればほとんど見つかります。無料で使える物が多いのも嬉しい。

クローム ウェブストア

webstoreの使い方がわからない人はどうぞ
chrome拡張機能 インストール方法


今回の目的はパソコンスマホサイトを確認するなんで、user agent で検索。

いろいろと拡張機能がでてきますがオススメは

拡張機能についてはインストール時期によっては、更新がなく古いとかアップデート以後おかしくなったとかが希にあるんで、レビューを確認して現時点で一番良さげなプラグインを選んでください。

拡張機能を使うのがとっても簡単なsmartphoneや携帯サイトを見る方法ですが、ぼくはクロームの利用では最速表示を目的としてるんで、不要なアプリや拡張機能はできるだけ入れないようにしています。

古いパソコンを使ってるんでマシンパワーもないからね。


クロームの拡張機能を使わずにスマホサイトを閲覧する


google chrome では拡張機能やエクステンションを使わずにスマートフォンサイトを確認できます。

chromeブラウザ右上の
  1. Google Chrome の設定
  2. ツール
  3. デベロッパーツール

クローム 開発者ツール
クリックで拡大

ショートカットは、Ctrl+shift+I

で、デベロッパーツールが立ち上がったらブラウザ右下の Setting
クローム 開発者設定

Setting画面で
  1. Overrides
  2. User Agent をチェック
  3. プルダウンメニューから iPone など表示したいブラウザや機種を指定します

クローム ユーザーエージェント変更

下にある Device metrics にチェックを入れて幅や高さを記入すると、よりスマホサイトに近い画面に変更できます。

user agent で現在変更可能なブラウザはこんな感じ

クローム ブラウザの種類 バージョン

  • IE - internet explorer
  • FF - firefox
  • chrome
  • iphone
  • ipad
  • android
  • blackberry
など、主要なbrowserの現在利用されているだろうバージョンと windows mac、ios や Androidなど必要な物はほとんど確認できます。

で、iphone - ios5 で表示
クローム iponeの画面

もちろんリンクからページを切り替えてもiphoneの見え方で表示されるんでスマホシュミレーターとしてもばっちり利用できます。


スタイルシートを触っていると、各ブラウザ間で表示の誤差がでます。

統一してくれるとありがたいけど、サイト制作者側でだいたい使える程度には調節しないといけないんで、面倒ですが主要なブラウザで表示の確認ぐらいはしておきましょう。



あわせて読みたい google カテゴリーのトピックス

COMMENTS

COMMENT FORM

TRACKBACK


この記事にトラックバックする(FC2blogユーザー)

人気ページランキング
最近のエントリ
迷惑メール対策
アクセスアップ
blogカスタマイズ