スマホサイズに合わせて文字サイズを最適にする方法

文字サイズを指定する単位

普段使っているサイズに使われる単位、何個思いつきますか？
px, %, em, rem　ざっと思いつくのはこのくらいでしょうか？

css3の新しい単位

新しく加わった単位、vw・vh・vmin・vmaxというのがあります。　頭文字のvはviewportの「v」ですが、viewport(ビューポート)を基準にした新しい単位になります。
viewportとは日本語で説明するなら「表示領域」みたいなもんです。

簡単に言えば、ブラウザのhtmlが表示されてる場所のこと。

viewportはこんな感じのイメージ

新しく加わった単位の説明はこちら

今回はvwを使っていきます。

文字サイズを最適にするための考え方と例

皆様はスマホページのデザインデータは横幅何ピクセルで作っていますでしょうか？　またその時のベースになる文字サイズはいくつで作っていますか？

文字サイズを最適にするために必要な情報は2つだけ。　　
デザインデータの横幅とデザインデータの文字サイズです。

こんな感じでウィンドウサイズ(viewport)に対して適切な大きさの文字が表示されます。

bodyに指定してしまえば、あとはいつも通り%で大きさを変えれば良いので今動いているサイトに追記するのも簡単！
問題は基準値をいくつでしていするかですね。

基準値を決めるにはスマートフォンの大きさを知らないと考えられませんが、スマートフォンのサイズがどんなもんか弊社サイトでのシェア率の高いものをいくつかピックアップしてみました

スマホサイズ

これで大体方針が確定できそうですが、もう一つだけ気をつけなければいけないことがあります。
ブラウザの対応範囲です。

vw,vhの対応ブラウザを見てみましょう

PCで言えばIEのバージョンがきになるところですが、問題はAndroidですね。
対応していないバージョンでも文字が従来通り表示できるように下記のように記述してます。
!important１をつけることで対応できる端末はそちらが優先されます。

body {
	font-size: 4.266vw !important;
	font-size: 16px;
}