WordPressいじっててパソコンプレヴューはすぐ出来るんですが、iPhone対応の設定してるとどんな感じに見れるのかいちいちiPhone取り出して確認してって面倒なので調べてみた。

Firefoxのアドオンで
User Agent Switcher

てなものがあった。

https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

からUser Agent Switcherをダウンロードしてアドオンをインストール

Firefoxをリ・スタート

「ツール」→「Default User Agent」→「iPhone 3.0」で設定完了。

西村高速自動車2　iPhone版をFirefox UA-iPhone3.0で見ると・・・。

iPhone SafariはHTML5でCSS3なのでCSSの角Rとかドロップシャドーとかが表示されませんけど、何となくこんな感じって確認できます。

灯台下暗し！！

Firefox使わんでも　SafariにはデフォルトでUA変更機能がついてました。

「開発」→「ユーザーエジェント」→「Mobile Safari 4.1ーiPhone」（これはMac or　WinのSafariのバージョンでMobileSafariのバージジョンも違って来ます。）

西村高速自動車2　iPhone版をSafari UA MobileSafariーiPhone4.1で見ると・・・。

当然、AppleのブラウザーなのでiPhoneと同じ表示になります。

ちなみに 西村高速自動車2　iPhoneSafariで見た時のスクリーンショットです。

Safariにはこの他ウェブ開発用に標準装備の「Web Inspector」で、サイトのソースやCSS、スクリプトが解りやすく確認する事が出来ます。

Tweet