AndroidのChromeブラウザでフォントサイズが大きくなってしまう場合の解決方法
2016.07.12
iPhoneでは問題ないのにAndroidだとフォントが大きくなってしまう
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設定やなんらかの干渉でバグっぽくなったりすることがあるので、
可能であればスマートフォンのブラウザが新しくなる時に事前にウェブサイトのメンテナンスもできたらいいんですけどね。
時間と予算がね。。