user-scalableどうするか

viewportにuser-scalable='no'という文字列を指定するとスマホとかで拡大ができなくなる。

私はスマホ対応といったとき、デバイスの横幅に合わせて横スクロールが発生しないことと拡大せずに閲覧できることだと勝手に思っていたが、そもそもスマホ対応していようが拡大しないと読めないレベルの視力の人は大勢いる。 とくに私が主宰のサイトは高齢者層が多いので、極端に拡大しないと文字が読めない人もいる。 そういうわけで以前から、analyticsで高齢者がほかより多いと確認できていたタブレットユーザに関してはviewportのuser-scalable='no'を外していたのだけど、今回全面的にuser-scalable='no'を辞めることにした。

ところで、多くのサイトで今user-scalableがどうなってるのか気になったので調べてみた。

Cookpad => 拡大できない

トップとレシピページしか見てないが拡大できなかった。

食べログ => 拡大できない

こちらもトップとレストランページしか見てない。

Yahoo => 一部できる

トップはできなかったが

ニュースはできた。このように文字数が多いページは拡大できるようにしてるみたい。

はてブ => できない

主要なページ一通り見たができなかった。

Amazon => できない

朝日新聞 => できない

ここまでの傾向から老人のユーザが多い文字が多いサイトは拡大傾向にあるのかと思ったが朝日新聞はそんなことはなかった。

Naverまとめ => できない

できない。まぁ見出しと画像しか見てない気もする。

Wikipedia => できる

楽天 => できない

今回いろいろ見た中で、一番拡大させてくれよと思った。画像の中の文字が読みづらい。読めない人もけっこういると思う。

Apple => 拡大できる

Google => 一部できる

検索結果は拡大できなかったけど、トップはできた。

まとめ

予想以上に拡大できないサイトのほうが多かった。文字数が多くて文章の内容を伝えるのが価値になるサイト、とくに50代以降で老眼が進んでいるユーザが多いサイトでは拡大はできたほうが良さそう。 また、画像にテキストを埋め込む場合、cssでコントロールできないのでレスポンシブでスマホで潰してみた時に識字しづらくなる場合があるけど、拡大を許可するだけで代替画像とか用意しなくてもまぁOKなので、そういう点では楽できると思う。

ちなみに幅を固定したままで文字サイズを変更できるようにしたいなら、htmlの基準font-sizeを14とか20とか動かせるようにして、それ以外のフォントサイズ等をすべてremで指定すればいいと思う。jsで切り替える感じで。 でも、ユーザにとってそれとピンチジェスチャーどっちが楽ですかっていう話でもある。