スマートフォンサイトの制作をするために参考サイトをよく見るのですが、
(こことか→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)仮面アイコンでユーザーエージェントを切り替え
この仮面アイコンをクリックするとズラーっとブラウザやOSの種類を選択するメニューが出てきます。
今回はiPhoneでの見た目を試したいので、試したいページをブラウザで開いて、このメニューから「iPhone」をクリックします。
「あれ、何も変わらない?」
と思いましたが、ページを更新すれば反映されます。
最初インストールしたとき、表示が変わらず「不良品かよ…」と思って無効にしていましたが、単なる更新し忘れでした。
めちゃ便利です。デベロッパーツールでコードが見放題です。
ユーザーエージェントが有効になっているときは仮面マークにサングラスが付きます。遊び心ですね。
3)ユーザーエージェントを解除したい
解除は、もう一度仮面アイコンをクリックして、「Default」を選択してからブラウザを更新してください。
今回はスマートフォン向けにiPhone表示をブラウザで確認したかったのですが、IEのバージョン別表示もできるんですね。
IEテスターがいまいちな感じ(すぐクラッシュする)なのでなかなか重宝しそうです。
iPhoneシミュレーターとかmacは充実してるんですけど、Windowsがなかなかいいのがないんですよね。
PCからのアクセスだと無理やりリダイレクトされるのはフレンドリーではないですね(制作者的に…)。
「PCで表示/スマートフォンで表示」のように選択肢を残しておいてあげると僕はうれしいです。
こちらの記事もどうぞ
スマートフォンサイト制作で快適にコーディングするために使うツールなど - emuramemo