【CSS】モバイルサイトの文字サイズがおかしくなるとき

Mon, 04 Aug 2025 00:00:00 +0000

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>

text-size-adjustについて

text-size-adjust - CSS: Cascading Style Sheets | MDN

Text-Size-Adjust on qwerty.work

【CSS】モバイルサイトの文字サイズがおかしくなるとき

原因はiOS Safari／旧 Android ブラウザの「自動フォント拡大」

解決方法

text-size-adjustについて