ホームページ > ウェブフロントエンド > CSSチュートリアル > グローバル スタイルで text-size-adjust を使用していますか?

グローバル スタイルで text-size-adjust を使用していますか?

王林
リリース: 2024-09-11 06:38:02
オリジナル
1304 人が閲覧しました

最近、実際のモバイルデバイス、特に iOS Safari でのみ現れる謎の CSS 問題に遭遇しました。特定のフォントが不釣り合いに大きく表示され、レイアウトの整合性が損なわれていました。開発ツールで異なるフォント サイズを適用してこの問題を修正しようとしたり、! important を使用したりしても効果はありませんでした。以下に、希望する画面表示と最終的に表示される画面を示します。

Do you use text-size-adjust in your global styles?

何が起こっているのかを理解する

調査した結果、モバイル ブラウザはユーザーの読みやすさを高めるためにフォント サイズを動的に調整する場合があることがわかりました。モバイル ブラウザのレンダリング動作は、デスクトップ ブラウザのレンダリング動作とは異なります。通常、デバイス画面の幅でページをレンダリングするデスクトップ ブラウザとは異なり、モバイル ブラウザは、小さな画面用に最適化されていない Web サイトに対応するために、通常はデフォルトとして 980 ピクセルに設定されている広いビューポートを利用することがよくあります。そうすると必然的に横スクロールになってしまいます。これに対処するために、HTML では一般に以下のルールが採用され、デバイス サイズに正確に合わせてビューポートが拡大縮小されるようにします。

<meta name="viewport" content="width=device-width, initial-scale=1" />
ログイン後にコピー

ただし、一部のブラウザでは、モバイル画面に合わせて縮小すると、テキストが小さすぎるため、読みやすさを向上させるためにテキスト インフレーション アルゴリズムを適用してテキストを拡大することがあります。このアルゴリズムにより、予期しないフォントの拡大が発生することがあります。特に、画面の全幅にまたがる要素で、レイアウトが変更されずにテキスト サイズが拡大される場合に顕著です。この動作に対処し、デバイス間で一貫したテキスト サイズを維持するには、CSS text-size-adjust プロパティを利用できます。

text-size-adjust を使用すると、Web 作成者はこの自動テキスト膨張動作を無効にしたり調整したりできます。これは、小さな画面を念頭に置いて設計された Web サイト (新しい Web サイトの大部分がそうだと思います) にとっては特に重要です。このプロパティは、一部のスマートフォンやタブレットで使用されるテキスト インフレーション アルゴリズムを制御します。他のブラウザでは無視されます。デフォルトのサイズ調整は、フォーム コントロールにテキスト (テキスト入力、選択など) が含まれるか含まれないか (ラジオ ボタン、チェックボックスなど)、テキストおよびフォーム コントロールに影響します。

可能な値は 3 つあります:

  • auto: この値は、小型デバイスでテキストをレンダリングするときにデフォルトのサイズ調整を利用するようにレンダラーに指示します。
  • none: レンダラーは、小型デバイスに表示されるテキストのサイズ調整を実行しないように指示されます。
  • percentage[0,∞]: レンダラーはサイズ調整を行う必要はありませんが、代わりに font-size の計算値にこのパーセンテージを乗算する必要があります。 100% を使用することは、何も使用しないことと同じです。

これを修正するための私のアプローチ

このプロパティをグローバル 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 がオーバーライドされ、サポートされていないため適用されず、デフォルトとして動作します。

他にも留意すべき考慮事項がいくつかあります:

  • 実験的な性質: text-size-adjust プロパティは実験的な機能のままであるため、本番環境で実装する場合は注意が必要です。ブラウザのサポートと実装は時間の経過とともに変更される可能性があります。
  • 「小型デバイス」の定義: 「小型デバイス」を構成するものの定義については、依然として曖昧な点があります。
  • none を使用するとモバイルでズームできなくなると不満を言う人もいましたが、私がテストしたときはそうではなく、mdn の説明どおりに none と 100% が同じように機能しました。

他の人がどのように使用するか

いくつかの一般的な CSS リセット/正規化ライブラリには、text-size-adjust のバリエーションが組み込まれています。

  • normalize.css
  • 新しい CSS リセット
  • sanitize.css.

読んでいただきありがとうございます?これについてさらに詳しく読みたい場合は、追加のリソースを以下に示します。

  • drafts.c​​sswg.org

  • ウェブリファレンス

  • developer.apple.com.

以上がグローバル スタイルで text-size-adjust を使用していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート