(Danger!) Preventing Zoom from Changing Text Size
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
ブラウザのズームは、アクセシビリティの機能です。これに反するような試みは、無用な問題を引き起こす可能性があります。放っておくべきです。
ブラウザズームを活用しつつ、高ズームレベルでもサイトが見栄えよく表示されるようなコーディングの優れた例を見たことがあります。しかし、それらはズームに対して闘うようなものではありません。
あなたが言うかもしれません。「私のサイトを 500% にズームすると、見た目が悪くなる!」確かにそうかもしれません。しかし、それは単なるあなたの意見に過ぎません。ズームは一貫して機能します。ズームを使う人々は、その動作を知っています。彼らはあなたとは違う、あなたが持っていない違う見方や期待を持っているかもしれません。
この例を紹介する前に、上記のことを書いておきたかったのです。これは先日、誰かから送られてきた、ウィンドウサイズに合わせてタイプサイズを変えるための方法の変形版です。
html { --size-factor: (0.00188323 * 100vw); font-size: calc(12 * var(--size-factor)); }
元の版ではさらに複雑で、ページの向きによってスケーリング数値が変わるなど、さまざまな機能がありました。この方法の効果は、ウェブサイトでフルードタイプを実現することです。ウィンドウが大きくなれば、タイプも大きくなり、逆に小さくなれば小さくなります。上の例で見られる不思議な数値は、ピクセル単位 (px) に近い数値で計算できるように掛け算されているものです。この場合は 12px に相当します。これは昔よく見られた font-size: 62.5%; のように、1.2rem を 12px と頭の中で簡単に計算できるようにする手法と同じです。しかしこの考え方は捨てるべきです。フォントサイズをピクセル単位で考えるのは役に立ちません。
ここで実際に起こっていることは、 font-size がビューポート単位のみで設定されていることです。これがブラウザズームに対抗するものです。html { font-size: 3vw; } としても、ほぼ同じ効果があります。
ここで若干のシフトが見られるのは、body の default の 8px のマージンがズームに合わせて拡大縮小されているためです。
これは好ましくありません。
助言は、font-size を設定する際は、ビューポート単位だけでは絶対にいけません。他の単位を組み合わせる必要があります。ピクセル単位 (px) でも、ある程度のスケーリングは維持できます。しかし、ここであまりにもスケーリングのレートを上げ下げしすぎると、ズームが自然に機能する範囲を逸脱してしまう可能性があります。
私が知る限りでは、clamp() を使って font-size がウィンドウサイズだけでは極端に大きくも小さくもならないようにし、同時に 1 付近の rem 値を計算に含めることで、ズームが通常通り機能するのが最善の方法です。
Fluid Type Scale のウェブサイトでは、簡単に生成されたスニペットが得られます。
コンテナユニットを使う場合も同様です。
