Android4系のデフォルトブラウザでwidthが効かないバグとbackground-colorで回避出来るというメモ

Android4系のデフォルトブラウザで、どうしてもレイアウトが崩れるという話を持ちかけられて、調べてみました。
どうもviewportを指定してない場合に、widthがdevice-widthより大きな値を指定しても、無視されるというものみたいです。
widthが効かないというのがどういう事か、文章だとよくわからないと思うので、再現させるコードと、それを表示したスクリーンショットを下の方に載せてます。

解決策

なにが起きるかと言うと、
p要素のwidthを無視して勝手に横幅が設定されて幅が短くなる。
androidのバージョンによって変わるみたいで、
android2系だと問題ないけどandroid4系だとおかしい(端末の違いも考えられるけど)。
いろいろやってみて、
なぜかbackground-colorを入れると意図した幅で表示された。
なんでbackground-colorで横幅?
http://d.hatena.ne.jp/hateka/20120824/1345816637

p要素が無かったけど、もしかしてと思ってdiv要素にbackground-colorを設定したら改善しました。なのでもしかしたらブロック要素全般の問題なのかも。

割と普通にハマりそうなバグだけど、情報が全然無くって困ってたんですが、この記事を見つけて助かりました。読んだ時はそんなまさかと思いましたけど。

コードとスクリーンショット

コード

viewportを指定してないHTML
viewportを指定したHTML

下のスクリーンショットは、左から「viewportを指定してないHTML」と「viewportを指定したHTML」×2枚です。Android2系のXperia neoだと問題なく、Android4系のGalaxy Nexusだとwidthがおかしくなっています。

Galaxy Nexus

viewportを指定してないHTMLを表示

viewportを指定したHTMLを表示(1)

viewportを指定したHTMLを表示(2)

Xperia neo

viewportを指定してないHTMLを表示

viewportを指定したHTMLを表示(1)

viewportを指定したHTMLを表示(2)

詳細

Galaxy Nexusでviewportを指定しない場合の表示を見ると、どうやらwidthが効かないというより、device-widthよりも大きな値が無視されてる感じがします。device-widthよりも小さい300pxを指定してる要素は、ちゃんとwidthが効いてます。

バグとは関係無さそうだけど逆に<meta name="viewport" content="width=device-width">を指定してる場合に、background-colorでバグ回避すると、widthがdevice-widthより大きいならdevice-widthを突き抜けてますが、Android2系だとdevice-width以上の幅を持つ要素にはならないようです。これはPCでいうと横スクロールバーが出てる様なもんだと思うので、Android4系の方が正しい動きの様な気がします。

ちなみに、Androidのdevice-widthは、端末によって320px or 360px(タブレットと一部の特殊な端末を除く)です。

余談

Androidのデフォルトブラウザはブラウザという名前ですごい検索しにくいです。しょうがないのでデフォルトブラウザって書いてるけど、他の呼び方をしてる人もいそうで、こういうバグ情報とかも散らばってしまいそう。もうちょっと考えた名前を付けて欲しいなぁ。

環境

widthが効かないバグが出る

環境 バージョン
端末 Galaxy Nexus SC-04D
Android 4.0.4
Browser 4.0.4-SC04DOMLE3

widthは効く

環境 バージョン
端末 Xperia neo MT15i
Android 2.3.3
Browser 2.3.3

Android4系のデフォルトブラウザでwidthが効かないバグとbackground-colorで回避出来るというメモ」への7件のフィードバック

  1. meppon

    有益な情報ありがとうございます!
    迷宮にはまってましたが、助かりました!

  2. kanonji 投稿作成者

    お役に立ったようで良かったです。
    とはいえ、自分も全然情報が見つからなくって、引用元の記事のおかげです。

  3. 本屋

    私は背景色があるのに発生したので、backgroundで色と透明な画像を同時に指定して対応しました。
    機種ごとに違うみたいで対応するのがアホらしくなります。

  4. kanonji 投稿作成者

    コメントどうもです。
    動きが違う機種もあるんですね・・・。いい加減デフォルトブラウザを消してChromeあたりを標準のブラウザにしてほしいですね。

    ところで、もし良かったら、その動きが違った機種名や型番など、教えてもらえませんか?
    何をするって訳でもないんですが、書いておけば誰かが参考にするかもしれません。

  5. ピンバック: 【JS】Androidレイアウト崩れでハマったこと覚書 | kotazi.com

  6. kanonji 投稿作成者

    コメントどもです。
    お役に立ったなら何よりです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>