ビューポートのサイズに合わせてフォントを拡縮する
iOSではzoomが非対応に
レスポンシブデザインにおいて、画面サイズに合わせてフォントサイズも拡縮しないとデザインを大きく崩してしまう場合があります。
そのようなときは、こちらのjQueryプラグインのような挙動を実装する必要があります。
これまでは、そのものずばりjQueryプラグインに頼ったり、またzoomプロパティが強力な手段として使われていました。
これまでは、zoomプロパティがそんなケースに対応する強力な手段でした。 zoomプロパティを用いた方法について言及しますと、基本的なロジックは下記記事で扱われているケース同様、基準となる画面サイズ（たいていはブレイクポイントやviewportのサイズ）と、現在の画面サイズとの比率を算出して、Javascriptでzoomプロパティをスタイル指定することで、先のjQueryプラグインと同様の挙動を実装します。
ところが、iOSではバージョン8よりzoomプロパティが非対応となってしまい、拡縮させることができなくなってしまいました。
jQueryプラグインによる対応方法も残されていますが、ここではよりモダンな方法として、CSS3より登場した新しい単位のひとつ、vwを用いたフォントサイズの指定を紹介します。
vwとは
vwとは、ビューポートの幅に対する単位です。
vhや、vmin、vmaxという単位も存在します。 1vwはビューポートの1/100となる幅です。ですので、ビューポートと同じ幅は100vwとなります。
下記ページにて、もろもろ詳細がまとめられていますので、併せてご参照ください。
さて本題に戻りますと、ここでは例として、1200pxのデザインデータにおいて、テキストのフォントサイズが16pxであった場合を想定することにします。
要件は、画面サイズ1200px以下は比率を保ったまま縮小する。
基本的な考え方は先述したzoomプロパティの値と同様です。基準となるビューポートの幅（1200px）に対するフォントサイズ（16px）の比率を算出し、その比率をCSSにてフォントサイズの値として指定します。
今回の例では画面サイズ1200pxに対して文字サイズは16pxなので
16 ÷ 1200 = 0.013333....
という算出結果となります。CSSには
p {
font-size: 1.33vw;
}
と指定します。
このように指定することで、jQueryプラグインを使用しなくても、画面サイズに合わせてフォントサイズも拡縮することができます。文字サイズのみが変化するので、描画領域そのものには影響がありません。
ちなみに無限にフォントサイズが小さくなるわけではなく、下記記事でも言及されているとおり、ブラウザの仕様上、10pxで頭打ちとなります。
ちなみに先の記事で利用されているtransformを用いた方法は、文字サイズだけでなく描画領域までも縮小してしまうため、手間がかかる上に保守性に欠けるため使わないほうがよいでしょう。
