iPhone の Safari でテキストが予想よりも大きく表示されるのはなぜですか?

iPhone の Safari でのフォント サイズの不一致

明示的なフォント サイズを設定しているにもかかわらず、iOS の Safari で特定のテキストが大きく表示される場合があります。 font-size の値が小さい場合でも、予想よりも大きくなります。この異常は、モバイル デバイスで読みにくいと思われるテキストのサイズを自動的に変更する Safari のデフォルト動作に遡ることができます。

-webkit-text-size-adjust による問題の解決

この問題を回避するには、CSS プロパティ -webkit-text-size-adjust を使用できます。 -webkit-text-size-adjust: 100% を設定すると、 body 要素で、自動スケーリングをオーバーライドして、指定したフォント サイズに従うように iPhone の Safari に指示します。実装例は次のとおりです。

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

このメディア クエリは、最大幅 480 ピクセルのデバイスをターゲットにし、-webkit-text-size-adjust プロパティが iPhone 画面にのみ適用されるようにします。このメディア クエリ内で Safari の自動スケーリングを無効にすると、フォント サイズに関係なく、すべてのテキストがスタイルシートで指定されたとおりにレンダリングされるようになります。

以上がiPhone の Safari でテキストが予想よりも大きく表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。