iPhone対応サイトをパソコンから見る

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 UA Firefox
iPhone UA Firefox

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で見ると・・・。

iPhone UA Safari
iPhone UA Safari

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

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

iPhone Screenshots
iPhone Screenshots

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


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL