最近、実際のモバイルデバイス、特に iOS Safari でのみ現れる謎の CSS 問題に遭遇しました。特定のフォントが不釣り合いに大きく表示され、レイアウトの整合性が損なわれていました。開発ツールで異なるフォント サイズを適用してこの問題を修正しようとしたり、! important を使用したりしても効果はありませんでした。以下に、希望する画面表示と最終的に表示される画面を示します。
調査した結果、モバイル ブラウザはユーザーの読みやすさを高めるためにフォント サイズを動的に調整する場合があることがわかりました。モバイル ブラウザのレンダリング動作は、デスクトップ ブラウザのレンダリング動作とは異なります。通常、デバイス画面の幅でページをレンダリングするデスクトップ ブラウザとは異なり、モバイル ブラウザは、小さな画面用に最適化されていない Web サイトに対応するために、通常はデフォルトとして 980 ピクセルに設定されている広いビューポートを利用することがよくあります。そうすると必然的に横スクロールになってしまいます。これに対処するために、HTML では一般に以下のルールが採用され、デバイス サイズに正確に合わせてビューポートが拡大縮小されるようにします。
<meta name="viewport" content="width=device-width, initial-scale=1" />
ただし、一部のブラウザでは、モバイル画面に合わせて縮小すると、テキストが小さすぎるため、読みやすさを向上させるためにテキスト インフレーション アルゴリズムを適用してテキストを拡大することがあります。このアルゴリズムにより、予期しないフォントの拡大が発生することがあります。特に、画面の全幅にまたがる要素で、レイアウトが変更されずにテキスト サイズが拡大される場合に顕著です。この動作に対処し、デバイス間で一貫したテキスト サイズを維持するには、CSS text-size-adjust プロパティを利用できます。
text-size-adjust を使用すると、Web 作成者はこの自動テキスト膨張動作を無効にしたり調整したりできます。これは、小さな画面を念頭に置いて設計された Web サイト (新しい Web サイトの大部分がそうだと思います) にとっては特に重要です。このプロパティは、一部のスマートフォンやタブレットで使用されるテキスト インフレーション アルゴリズムを制御します。他のブラウザでは無視されます。デフォルトのサイズ調整は、フォーム コントロールにテキスト (テキスト入力、選択など) が含まれるか含まれないか (ラジオ ボタン、チェックボックスなど)、テキストおよびフォーム コントロールに影響します。
可能な値は 3 つあります:
このプロパティをグローバル CSS スタイルの一部として本文に追加することで、テキストの膨張の問題を修正しました (HTML にも追加できます)。このルールを global/reset/normalize CSS ファイルに追加することをお勧めします:
body { // prevent font-size inflation on small devices text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
iOS safari の場合は、-webkit-text-size-adjust のみが機能しますが、他のブラウザーのサポートを追加するために、他のベンダーと非ベンダーのプロパティを含めました。最初に非ベンダー プロパティを追加することが非常に重要です。最後に追加すると、Safari iOS では -webkit がオーバーライドされ、サポートされていないため適用されず、デフォルトとして動作します。
他にも留意すべき考慮事項がいくつかあります:
いくつかの一般的な CSS リセット/正規化ライブラリには、text-size-adjust のバリエーションが組み込まれています。
読んでいただきありがとうございます?これについてさらに詳しく読みたい場合は、追加のリソースを以下に示します。
drafts.csswg.org
ウェブリファレンス
developer.apple.com.
以上がグローバル スタイルで text-size-adjust を使用していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。