Android 4系でテキストが縮小表示されるバグ

すっかり忘れていて、久しぶりに遭遇した。

忘れないようにメモ。

 

まず前提として、モバイル非対応のサイトをAndroid 4系で表示した時に発生する。

テキストが半分の位置で改行され、縦長にずれてしまう現象だが、テキストノードが存在するDOMの最下位タグにCSSプロパティの background-color もしくは background-image を指定する。

ただし、見た目上変わる可能性もあるので、background-image : url(transparent.png) のように透明な画像を指定するのが一番手軽