iOS Safariでだけフォントサイズが崩れたら-webkit-text-size-adjustを使う
モバイルデバイスにおいて、フォントサイズを自動調整する機能のためのCSSプロパティ スマートフォン用のレイアウトがないページをスマホで表示するとフォントサイズがとても小さくなってしまうので、ブラウザが自動でサイズを調整できるように作られたらしい
SafariではiOSでのみ実装されていて、ベンダープレフィックス-webkit-text-size-adjustをつける必要がある
この自動調整機能によって、「スマホでだけCSSで指定したフォントサイズよりも大きくなる」「デバイスを横向きにするとフォントサイズが大きくなる」といった現象が起こる
レスポンシブデザインなどを利用してスマホに最適化済みであれば、この挙動は邪魔なので100%を指定することで自動調整を無効化できる
code:css
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
「highlight.jsでシンタックスハイライトしたコードブロックにおいて、iOS Safariでだけ一部フォントサイズが大きくなる」現象に遭遇したが、これも自動調整機能が原因のようだった 上のCSSを適用したら直った