iPhone の Safari でフォント サイズがおかしくなるのはなぜですか?

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 デバイス) をターゲットにしており、

内の Safari の自動テキスト スケーリングを無効にします。要素。 -webkit-text-size-adjust を 100% に設定すると、不要な変更を加えずに指定したフォント サイズを尊重するように Safari に指示できます。

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

以上がiPhone の Safari でフォント サイズがおかしくなるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。