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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



あわせて読みたい スポンサー広告 カテゴリーのトピックス

    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カスタマイズ
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。