FirefoxやChromeでスマートフォンでの表示を確認したい時はこの方法

·

スマートフォンサイトを作成していて、実機でのチェックの前にパソコンでスマートフォンでの表示を確認したい時があるだろう。
そんな時に便利なFirefoxのアドオン、Chromeの拡張機能を紹介。

まずはアドオン、拡張機能を追加する方法

Firefox
ツール→アドオン→アドオンを検索

Chrome
ウィンドウ→拡張機能→他の拡張機能を見るをクリック→拡張機能を検索

Firefoxのアドオンでおススメなのが以下の2種

User Agent Switcher
FireMobileSimulator

どちらも似た機能だが、どちらかといえばUser Agent Switcherは、IEなどの他のブラウザやスマホでからのアクセスのシュミレーション用、FireMobileSimulatorはガラパゴス携帯とスマホでのシュミレーション向けともいえる。
目的がスマートフォンだけならFireMobileSimulatorを選ぶと良いだろう。

アドオンを有効にすると、「ツール」メニューに
Default User Agent
FireMobileSimulator
のプルダウンが追加され、それぞれのサブ項目でターゲットとするスマートフォンや携帯の機種が選択できる。

Chromeの拡張機能でおススメはこちら

FireMobileSimulator for Google Chrome™ 1.0.2

拡張機能を有効にすると、アドレスバーの右にアイコンが追加されスマートフォンや携帯の機種が選択できる。