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、スクリプトが解りやすく確認する事が出来ます。