STUDIOでウェブサイトを制作した際、スマホで表示した際、文字サイズに違和感を感じる部分がありました。すべてのサイトがそうなる訳ではないのですが、そのサイトでは、16pxで指定した文字がセクションによって大きさが異なり、レイアウトが崩れました。iPhoneのSafariだけではなく、Chromeでも同様でした。
原因はiOS Safari／旧 Android ブラウザの「自動フォント拡大」
WebKit 系ブラウザ（特に iOS Safari）は、ビューポート指定が無い・狭い幅に収まらないなど “読みにくい” と判断すると、本文テキストだけを強制的に拡大します。
通常、HTML内にビューポートに関する以下のコードが記載されていれば、防げますがSTUDIOでは別の方法で対処方法が必要です。
<meta name="viewport" content="width=device-width, initial-scale=1">
解決方法
STUDIOの場合、以下のCSS「-webkit-text-size-adjust: 100%;」をカスタムコードに記載すれば、解決できます。カスタムコードはSTUDIOの有料プランのみで使用できるので、フリープランではこの方法は使えません。
<style>
html {
-webkit-text-size-adjust: 100%;
}
</style>
複数のブラウザに対応する際のベンダープレフィックスの記載は以下。
<style>
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
</style>
