Android 4.1.2 スマートフォンで文字が半分ぐらいで折り返すバグ

お客さんからスマートフォンで文字が変なところで折り返すのですが~と相談されました。

i-phone4、5、6でも検証してみましたが同じ症状になりませんでした。

Android2.3.4 IS05 4年前ほど前に買ったスマフォでしたがこちらも正常。。

アンドロイド シュミレーター

Android端末そろそろまとめてくれよ…と思いながらシュミレーターで4.1.2系で見てみると同じ現象になりました!

20141015_img01

この画像の様に文字が中途半端なところで折り返されております。

viewportでも解決できるのですが、
最近のAndroid端末は解像度が高く拡大できないという不具合もでてしまいましたので
viewportを使用しない解決方法を行います。
(下記は設定していたviewportです。正しく表示される端末もありますが、うまく表示されない端末もあります。)

<meta name="viewport" content="target-densitydpi=300, width=1000, maximum-scale=1.0, user-scalable=yes">

解決方法

テキストの<p>タグに背景をつけることによって勝手に折り返しすることを回避できます。

background-colorでもbackground-imageのどちらでも大丈夫です。
私は1pxの透過画像を背景に置きました。

p {
 background: url(../images/common/p.png) no-repeat;
}
20141015_img03

これで文字が折り返さず表示されました。

今回はPCサイトをスマホで表示させる場合のバグでした。
スマートフォンサイトを作っている場合は起きないかもしれませんね。

Android端末とは上手に付き合っていきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です