Androidでテキストの横幅が狭まってしまう不具合

CSS

2014/04/042015/12/20

最近はスマートフォンサイトを作る機会が多いんですが、この前「PCサイトだけどスマホでもとりあえず見れるよ」くらいのページを作った時に躓いたこと。
iPhoneやAndroid2系では何の問題もなく表示されるのに、Android4系では何故か横幅が小さくなってしまいます。

<!DOCTYPE html>
<html lange="ja">
<head>
<meta charset="utf-8">
<style type="text/css">
.wrap {
  width: 980px;
  margin: 0 auto;
}
p {
  width: 940px;
  margin: 0 auto;
  font-size: 90%;
  line-height: 1.8em;
}
</style>
</head>
<body>
<div class="wrap">
  <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>
</body>
</html>

こんな感じのhtmlをAndroid4系で見ると横幅が狭まってしまいました。

Androidの仕様で “p” の “width” が自動で変わるのかと思い “width” に “!important” を付けてみましたが、何も変わらず……

一度 “width” を “100%” にしてみると “margin: 0 auto;” で中央に寄せていたテキストが左に寄りました。
ということは “p” の横幅が狭まっているわけではなく “p” の中のテキストだけが縮んでいることがわかりました。(paddingが付いてるイメージ？)

流石にこれはどうしようもなかったので、Google先生に聞いてみたところ “background-color” を指定すれば直るという情報が。

横幅なのに何で “background-color” なのか…？
と思いつつ、試してみたらあっさり解決しました。

p {
  width: 940px;
  margin: 0 auto;
  font-size: 90%;
  line-height: 1.8em;
  background-color: #fff;
}

結局原因はわかりませんし、Android2系で問題なく、Android4系でのみおかしくなるのも謎です……
最近Androidにはバグが多いということを知った今日この頃です。