Android一部機種でテキストの幅が不足する
Android 4.x系の一部機種において、テキストの幅が不足することがあります。
下図がその一例です。
テキスト右側に、原因不明の空白があるのがお分かりでしょうか。
すべての機種にこの現象が起きるわけではなく、一部機種のデフォルトブラウザでの挙動です。
widthをはじめとするサイズに関連するプロパティや、word-wrapをはじめとするテキスト表示に関連するプロパティなど、いろいろ試したのですが全く効果がありませんでした。
そこで、テキストの描画領域はいったいどれくらいあるのだろうと、背景色をつけてみたところ直りました。
調べてみたところ明確な解決法はなく、小手先のテクニックとして(まさしく僕がおこなったように)背景を指定する方法があるそうです。
[実機未検証]Androidでp要素の幅が狭まる時の対応策 | webutubutu
どうやら、余白が生じるテキスト部分に背景色/背景画像を指定すればよいそうです。
ただし、その場所ごとに背景色を指定するのは非効率なので、極小(1×1px) の透過画像を背景に敷くといいとか。
なぜか background: transparent; は無効です。
p { background: url(/common/img/i.gif); }
上記で背景にしているGIFが透過画像です。
これだけのためにサーバー上に画像を置くことに抵抗があるならば、画像をdataURIスキームに変換して直接CSSに書く方法でも可です(下記コードでは長すぎるので途中省略しています)。
p { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH/C1h.....); }
実を申せば、Androidのブラウザの「ページの自動調整」の機能がオンになっていることが原因らしいのですが、一律で正しく表示するためにはこの方法しか今のところないそうです。