emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

windowsでもスマートフォンの表示を確認したい!chromeのアドオン「User-Agent Switcher」が便利

スマートフォンサイトの制作をするために参考サイトをよく見るのですが、

(こことか→iPhoneデザインボックス http://design.web-hon.com

PCでスマートフォンサイトのリンクをクリックするとほとんどの場合、

 

PCサイトに飛ばされます(泣)

 

スマートフォンディレクトリを叩いてもスマートフォンからのアクセスじゃないとPCサイトにリダイレクトされるようになっているのですね。

ええ、しっかり作られています。

 

ワタクシはソースがみたいのです!そんな時にお勧めのchromeのアドオン「User-Agent Switcher

 

1)まずはこちらからダウンロード

https://chrome.google.com/webstore/detail/user-agent-switcher/lkmofgnohbedopheiphabfhfjgkhfcgf

 

chromeに追加をクリックしてください。

 

2)仮面アイコンでユーザーエージェントを切り替え

f:id:emj1025:20130216174509j:plain

 

この仮面アイコンをクリックするとズラーっとブラウザやOSの種類を選択するメニューが出てきます。

 f:id:emj1025:20130216174531j:plain

今回はiPhoneでの見た目を試したいので、試したいページをブラウザで開いて、このメニューから「iPhone」をクリックします。

 

「あれ、何も変わらない?」

 

と思いましたが、ページを更新すれば反映されます

 

最初インストールしたとき、表示が変わらず「不良品かよ…」と思って無効にしていましたが、単なる更新し忘れでした。

 

めちゃ便利です。デベロッパーツールでコードが見放題です。

 

f:id:emj1025:20130216174542j:plain

ユーザーエージェントが有効になっているときは仮面マークにサングラスが付きます。遊び心ですね。

 

3)ユーザーエージェントを解除したい

f:id:emj1025:20130216174555j:plain

解除は、もう一度仮面アイコンをクリックして、「Default」を選択してからブラウザを更新してください。

 

今回はスマートフォン向けにiPhone表示をブラウザで確認したかったのですが、IEのバージョン別表示もできるんですね。

IEテスターがいまいちな感じ(すぐクラッシュする)なのでなかなか重宝しそうです。

iPhoneシミュレーターとかmacは充実してるんですけど、Windowsがなかなかいいのがないんですよね。

 

 

PCからのアクセスだと無理やりリダイレクトされるのはフレンドリーではないですね(制作者的に…)。

「PCで表示/スマートフォンで表示」のように選択肢を残しておいてあげると僕はうれしいです。

 

 こちらの記事もどうぞ

スマートフォンサイト制作で快適にコーディングするために使うツールなど - emuramemo

 

emuramemo(c) All Rights Reserved.