携帯(スマホ)サイトを作成したら実際にどのように表示されているのか確認していかなくてはなりません。

実機で確認するのが一番なのですが、すべての機種を持っているわけではないですし、もっと簡単に確認しながら作業をしてみたいという方も多いのではないでしょうか?

そこで今日はパソコンからサイトの携帯表示がどのようになっているのかを確認できるFirefoxのアドオンを紹介したいと思います。

Firefoxでアドオンを入手する

私が使っているFirefoxのアドオンは「FireMobileSimulator」というものです。

入手するには左上のFirefox>アドオンをクリック
2012-08-08_13h09_00

「FireMobileSimulator」と入力しアドオンを検索
2012-08-08_13h25_35

カエルのマークが目印です。インストールをクリックします。
2012-08-08_13h26_42

FireMobileSimulatorの使い方

FireMobileSimulatorの使い方は簡単です。

まず、Firefoxのオプションで「メニューバー」を表示させます。
2012-08-08_13h29_41

メニューバーの「ツール」>「FireMobileSimulator」>端末を選択
2012-08-08_13h31_45

携帯端末リストが表示されますので、表示させたい端末をクリックして選びます。
後は携帯(スマホ)サイトをブラウザで確認してみます。
(パソコン表示のままの場合はリロードF5を押してみてください。)

例:SB iPhone 3G
2012-08-08_13h36_50

元のパソコン表示に戻したいときには「端末選択解除」をクリックします。