knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

Android一部機種でテキストの幅が不足する

Android 4.x系の一部機種において、テキストの幅が不足することがあります。

下図がその一例です。  

f:id:ShinImae:20151211123019j:plain

テキスト右側に、原因不明の空白があるのがお分かりでしょうか。

すべての機種にこの現象が起きるわけではなく、一部機種のデフォルトブラウザでの挙動です。

widthをはじめとするサイズに関連するプロパティや、word-wrapをはじめとするテキスト表示に関連するプロパティなど、いろいろ試したのですが全く効果がありませんでした。

そこで、テキストの描画領域はいったいどれくらいあるのだろうと、背景色をつけてみたところ直りました。  

 

f:id:ShinImae:20151211124727j:plain

調べてみたところ明確な解決法はなく、小手先のテクニックとして(まさしく僕がおこなったように)背景を指定する方法があるそうです。

 

[実機未検証]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のブラウザの「ページの自動調整」の機能がオンになっていることが原因らしいのですが、一律で正しく表示するためにはこの方法しか今のところないそうです。