CSS と Safari のフォント サイズの癖

iPhone の Safari で予期しないフォント サイズの不一致が表示されることが確認されています。具体的には、フォント サイズが小さいテキスト (例: 13px) は、フォント サイズが大きいテキスト (例: 15px) よりも大きく表示されます。この不可解な動作により、次のような疑問が生じます: Safari のフォント サイズのオーバーライドには CSS 関連またはその他の要因があるのでしょうか?

この謎に対処するには、モバイル デバイス上の Safari の重要な側面を理解することが不可欠です。ユーザーフレンドリーな対策として、Mobile Safari は、テキストの表示が小さすぎるリスクを感知すると、テキストのスケーリングを自動的に調整します。これは、特に小さな iPhone 画面での読みやすさを向上させる試みです。この自動調整を克服するには、CSS プロパティが役立ちます: -webkit-text-size-adjust.

iPhone ユーザーのフォント サイズの混乱を解消する実践的な例を次に示します。

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

この CSS スニペットは、デバイス幅が最大 480 ピクセルのすべてのモバイル デバイス (つまり iPhone デバイス) をターゲットにしており、

結論として、Mobile Safari の自動テキスト スケーリングは、小さい画面での読みやすさを最適化することを目的としています。ただし、これにより予期しないフォント サイズの動作が発生する可能性があります。 -webkit-text-size-adjust プロパティを使用することで、開発者はフォント サイズの制御を取り戻し、iPhone を含むさまざまなデバイス間で一貫したテキスト表示を確保できます。