Design デザイン・UI

 
デザイン・UI学び

スマホサイト制作で困るブラウザの不具合【3選】

スマホサイト_ブラウザ不具合
スマホサイトが完成し検証作業をしていたら、表示が崩れている…ちゃんと動かない…。
スマホサイト制作に携わったことがある方なら、こんな経験一度はありませんか?
PCサイトと同じ感覚でコーディングをすると、思わぬ落とし穴があります。
今回はスマートフォンの標準ブラウザに起こる不具合をご紹介します。

font-weight:bold; 文字の太字(ボールド)が効かない

Android2系や、Andorid4系の一部でテキストに太字が効かないことがあります。
原因としてはAndoridのシステムフォントに太字機能がなく、CSSの「font-weight:bold;」の判別ができないようです。
代替措置として、ドロップシャドウやアウトラインなどを用いるのが多く見られます。
注意したい点としては、ドロップシャドウは文字がにじんで見えるため、アウトラインで装飾するのをオススメします。

参考サイト:Androidでfont-weight:boldを適用する方法

overflow:scroll; 枠内でスクロールできない

Android2系でブロック内のスクロール「overflow:scroll;」が効きません。
こちらもOS依存のようで、overflow:hidden;として処理されるようです。
代替措置としては、JavaScript(jQuery)プラグインでスクロールを実装します。ただ、JSによる処理により若干重くなり、処理前の要素が見えてしまうなどの問題点もあるため、ユーザーエージェントを判定してAndroidのみ実行するのがよいかと思います。
また、スクロールできるから要素をいっぱい詰め込もう!複数設置しよう!といったことは避けたほうが無難です。なぜなら、ページの下にスクロールしようとして操作している途中に、スクロールブロック内でスクロールしてしまうと、ユーザーにストレスを与えかねませんからね。

参考サイト:Androidでoverflowした要素をスクロール可能にするjQueryプラグイン

position:fixed; 固定表示ができない!

よくヘッダーや、メニューボタンを固定表示しているページを見かけますが、iOS4以前、Android2.3以前のブラウザでは、固定表示「position:fixed;」が対応していません。
こちらも、JavaScriptやJQueryMobileなどを使って強制的に固定しているサイトが多いようです。

参考サイト:Androidのposition:fixed;とz-indexのバグ?

まとめ:ブラウザの不具合と向き合う

iOSやAndroidの古いOSでは使えないCSSがありますが、それは仕方ないと割り切るしかないですね。JavaScriptで対応できるものが多いので、ページ容量に気を配りつつUI/UX設計を考えてみてください。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事