サイト表示互換性に関するノウハウ

モバイルデバイスを利用する上で、特定のデバイス／ブラウザに依存せず、どのブラウザでもサイトが正常表示可能な環境が理想的と考えています。
本稿では、主にAndroid版Firefoxで発生しているよくあるサイト表示不具合をパターン毎に分類し、Web標準に従ったコンテンツ記載によりブラウザ間の表示互換性を保てるノウハウをご紹介します。

目次

1. 画面レイアウトが崩れる

• 画面外に不要な空白が発生する

• ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう

• アイコンの中身が外側にはみ出すなどして形が壊れている

• アイコン,画像の表示位置がずれる

• アイコン,画像が期待と異なるサイズで表示される

• アイコンが隣接する他のアイコンと重なってしまう

• テーブルのレイアウトが崩れている

• 文字列の一部が表示されずに見切れる

• 文字列の表示位置がずれる

2. 装飾が抜ける

• ページの背景色が抜けている

• アイコン,バナーの色が抜けている

• mobile版Firefoxと他ブラウザで下線の色が相違している

• 枠のシャドウや角丸が抜けている

3. 画面要素の一部が表示されない

• アイコンが表示されない

• 罫線が表示されない

• チェックボックスのレ点が表示されない

TIPS

• mobile版Firefox向けベンダープレフィックス対処方法まとめ

• ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異)