グローバルスタイルで text-size-adjust を使用していますか?-CSSチュートリアル-php.cn

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

王林

リリース： 2024-09-11 06:38:02

オリジナル

1342 人が閲覧しました

最近、実際のモバイルデバイス、特に 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% が同じように機能しました。