Firebugでスマホサイトの落とし穴

Firefox+Firebugは、ずっとお世話になっているサイト制作には欠かせないソフトですが、スマホ制作の確認で使うとミスが起こるのではないかなと思い、その理由と解決方法をまとめました。

これはブラウザの落とし穴で、FirefoxはiPhoneなどで利用されているSafariと表示の解釈が異なります。
ベンダープレフィックスでいうところの、

-moz- は Firefox
-webkit- は Google Chrome、Safari

特にCSS3を利用していると、表示がだいぶ異なる場合があります。
表示されるプロパティが変わる為、意図したiPhoneやAndroidでの表示が見れないからです。

それを解消するのがベンダープレフィックスなのですが、今後の動向によっては難しくなる場合があるかもしれないので、スマホの制作ではなるべくFirefoxを利用しないようにしようと思いました。

あと、携帯端末の表示にはFireMobileSimulatorを便利で使わせて頂いていたのですが、スマホに関しては、Chromeでは大丈夫なのに、表示が崩れる場合があります。
これも同じくFirefoxやSafariなどによるブラウザの解釈の違いが影響しています。

なので、制作の確認には、FirefoxではなくChromeかSafariを利用して制作の確認をしています。

ChromeかSafariを利用する

Chromeに搭載されている、要素の検証とか要素の詳細を利用します。

Chromeの場合は、右クリック→要素の検証 「F12」がショートカットキーです。

HTMLの要素を見るやつのショートカットは、
・Winは Ctrl + Shift + C
・Macは CTL + Option + C

Safariの場合は、ツールにある「開発」のユーザエージェントでiPhone表示にして、右クリック→要素の詳細を表示
Safariの「開発」は、デフォルトでは隠れています。

Winは、編集 > 設定 > 詳細 > メニューバーに開発メニューを表示
Macは、環境設定 > 詳細 > メニューバーに開発メニューを表示

これらを使ってプロパティの確認をしながら作成していきたいと思います。