vwという単位について

CSSで設定できる長さの単位には、「VW」（ビューポート・ワイズ）というものがあります。
ブラウザの表示領域の横幅や、端末のビューポートの横幅を参照する値で、1vwで画面横幅の1％の横幅という事になります。
なので、横幅が縮まっても全体の構造が崩れにくいという利点があります。
特にフォントサイズに指定すると、画面横幅を縮めても、改行による崩れを抑える事ができます。

しかし、これもあまり普及はしていないようで、スマホでは主に15pxの値がフォントサイズに使用されている事が多いようです。
以前にvw使わせてくれみたいな記事を書きましたが、今回はピクセル「px」とビューポート・ワイズ「vw」の値を比較してみたいと思います。

スマホで指定する標準フォントサイズ

スマホ時では、多くが15pxに設定するのが主流なようです。
そしてGoogleが推奨する標準の文字サイズは16px以上。
一応、スマホでは15pxのフォントサイズが見やすいとの事らしいのですが、はたしてこのフォントサイズの設定が、全てのスマホにおいて均一に表示されるのでしょうか。

崩れが起きる要因

レスポンシブサイトをスマホ状態にして崩れが起きる要因の多くは、横に並んだ要素の合計が、画面幅の長さを超えたときです。
特にピクセルのような固定値で設定された要素が、崩れを引き起こす場合が多いです。

端末によってバラバラなビューポート

スマホはビューポートという、暫定されたピクセル数で、縦横の表示の長さを決定しています。
多くの場合は、横幅は370pxか375pxあたりを暫定的に決めています。
実際の解像度は、手のひらサイズながらもHD画質をしのぐ程の高画質ですからね。
そんな表示領域で、フォントサイズ16pxの文字を表示しようと思ったら、とんでもなく小さくなってしまいます。
なので、既存のWebサイトの多くで設定されている、標準フォントサイズ16pxを視認できるよう、ビューポートによって、横幅370pxあたりを暫定的に設定し、拡大表示しているのでしょう。

さて、そのビューポートなのですが、これは本当に機種によって様々です。
また、機種によってはフォントにアンチエイリアスがかかったり等で、若干の膨らみが生じたりと、印刷物のように作ったままでキッチリ表示されるという事は、まずありえません。
縦の高さも機種によって異なりますが、基本縦にスクロールする都合上、縦はあまり気にしなくても問題ないでしょう。

特にiPhone内でも機種によってバラバラで、横幅が大体370pxもあれば、375pxに設定されている場合もあります。
なので、一概に「iPhoneの場合」として、デザインを完成させたり、検証内容を決定する事はできません。

スマホにとってのピクセル

例えばフォントサイズを15pxに設定した場合です。
iPhoneだけでもビューポート横幅375pxや370pxの物があったりしますが、その画面上で表示される15pxの1文字分が占める画面の割合は、
横幅375pxのビューポートの場合は4%分
横幅370pxのビューポートの場合は4.1%分
という事になります。

つまり、同じピクセル数でも機種ごとに大小があるという事です。
当然、375pxの横幅で設計したデザインが、横幅370pxのビューポートの端末で崩れが生じないわけがないのです。

どの端末に対してどのフォントサイズがよいか

この端末なら基本フォントサイズ15pxがよいとか、16pxがよいとか聞きますが、例えば少し大きめな端末なら15pxでよく、小さい端末には少し大きめの16pxにしたいという場合、
15pxにしたい端末はビューポート横幅375pxであり、
16pxにしたい端末はビューポート横幅370pxである必要があります。

しかし実際には、
小さめの端末でも、ビューポート横幅が375pxであったり、
大きめの端末だけど、ビューポート横幅が370pxである場合もあります。
なんなら、370～375px以外のビューポート横幅の端末だって存在するでしょう。

そのような状況で、ピクセルでフォントサイズを指定し、一定の表示を狙うのはまず不可能でしょう。
見やすいよう配慮されたであろうフォントサイズで、変な改行により読みにくくなったり、見栄えが悪くなったりするのは、じつに皮肉な話です。

だからこそvwを使いたい

だからこそ、スマホ時に基本フォントサイズは、ピクセルではなく、端末のほぼ物理的横幅に合わせて調整される「vw」の値を使いたいものです。

小さめの端末を持っている人は、少々小さな文字も覚悟したうえで小さな端末を持ち、大きめの端末を持っている人は、端末に合わせて大きめの文字がよい。
そう考えて端末を選んでいる人が多いでしょうから、それに応えて端末の大きさに合わせてフォントサイズも調整されたほうが、いい気もするのですけどね。