
スクショを撮った環境はAndroid4.0.4
ドルフィンブラウザで診た時のものです。
元々入っている「ブラウザ」「エンジェルブラウザ」などでも同じような現象が確認されています。
このスクショの写真、変なトコで改行されていますが、横幅を指定したりとか、改行タグを使っている訳じゃないのです。
およそ、540~550pxぐらいのとこで何故か改行されてしまうのです。
で、本題ですけど、対策については今のところ2つ確認しています。
1つは、CSSでheightを入れる事。
0pxでも大丈夫です。ただしautoではだめです。
例:
.height {
height: 0;
}
もう1つは、
bgcolorを入れる事。
色じゃなくて画像でも大丈夫です。
アルファ使って10%とかでも大丈夫ですけど、0%はダメでした。
例:
.bgcolor {
background-color: #ffffff;
}
下記アドレスに指定実験してみたページがありますので、参考にしてみてください(気まぐれに消すかもしれませんが)
http://starfoothill.sakura.ne.jp/csstest/index.html
http://starfoothill.sakura.ne.jp/csstest/css.css
背景に画像を使っていないサイトであれば、
h1,h2,h3,h4,p,ul,div{bgcolor {background-color: #【背景と同じ色】;}
}
とやってしまうのがアンドロイド用対策が手っ取り早くできていいと思います。
ちなみに、iPhone、iPadではスクショのような表示にはならないそうです。
なのでそゆ現象に気づかない人も多いかも。