Anatomy

ANATOMY BLOG

マクロ視点のアクセス解析と品質管理ツール「ANATOMY(アナトミー)」のブログです

2015年9月3日木曜日

User-Agentをスマホやタブレットに切り替えて表示を確認する

サイトクローンはPC(Firefox)のUser-Agentだけではなく、様々なブラウザのUser-Agentに切り替える事ができます。もちろんPCだけではなく、スマホやタブレット、クローラーのUser-Agentを標準で搭載しています。

スマホかPCで出力を切り替えるタイプのサイトを開発・テストする際はこの機能を使うと、出力結果が切り替わるのはもちろん、その結果を保存する事ができます。

User-Agentの切り替えは、サイトクローンの設定画面からおこないます。




1. ツールバーの左端にあるアイコンをクリックし、「設定」を選びます
2. 以下のような設定画面が開くので、「User-Agent」のタブを選び、「User-Agent setting」の「enabled」にチェックを入れます。


3. 「Browser Profile」からPC、スマホ、タブレット、クローラーを選び、具体的なUser-Agentを「User-Agent」から選び「OK」を押します。
4. ツールバーに表示されている「User-Agent」がdefaultから選んだUser-Agentに変わっています。

5. ブラウザをリロードすると設定されたUser-Agentでアクセスされます。
例えばYahoo!JAPAN!で試すとこのようになります。

表示がスマホサイトになりました。しかし、画面の大きさがPCなので、見栄えが良くないですね。
そんな時は、「Ctrl + Shift + M」を押すことでレスポンシブデザインモードというビューに切り替える事ができます。
これで見た目はスマホと同じですね。
この機能はサイトクローンの動作モードに関係なく使用する事ができるので、通常のブラウジング中でも使用できます。
また、この設定はブラウザを再起動した後も有効になっていますので、元のFirefoxに戻したい場合は、同じように設定を開き、User-Agentタブの「enabled」のチェックを外しましょう。

0 件のコメント:

コメントを投稿