AndroidのChromeブラウザでフォントサイズが大きくなってしまう場合の解決方法

2016.07.12

iPhoneでは問題ないのにAndroidだとフォントが大きくなってしまう

イメージ画像
iPhoneで閲覧しているときは問題ないのに、
AndroidのChromeブラウザで閲覧した際に部分的にフォントサイズが意図せず大きくなってしまうことがあります。

原因としては、
metaのviewportでwidthが設定されている場合や、
metaのinitial-scaleが指定されていない場合などと言われています。

ちょっと前までは、
CSS:
body {
    -webkit-text-size-adjust: 100%;
}
を設定するとフォントのバグは治ると言われていたり、
iPhone、Androidで固有のClassを設定して個別にフォントサイズを指定してなんとか回避したりと色々と統一感が出ない感じでしたが下記の方法で最近のものは解決できることが確認できました。

解決方法

解決方法はバグがでている箇所に
CSS:
/*pのテキストが大きい場合*/
p {
    max-height: 100%;
}
を指定するだけです。

ただこれだけでは解決しない箇所もちょっとだけ確認でき、
解決方法としてはなぜか、
バグがでている箇所に「max-height: 100%;」と指定するだけでなく、
bodyに「-webkit-text-size-adjust: 100%;」を設定すると解決するという感じでした。

スマートフォンのブラウザ自体がその時々でバグがでたり、
CSS設定やなんらかの干渉でバグっぽくなったりすることがあるので、
可能であればスマートフォンのブラウザが新しくなる時に事前にウェブサイトのメンテナンスもできたらいいんですけどね。
時間と予算がね。。
← フランス語の特殊文字を実体参照を使ってHTMLで表示する
【Trello】Torelloでタスクやスケジュールをお手軽に管理する →