読者です 読者をやめる 読者になる 読者になる

プログラミング 美徳の不幸

Ruby, Rails, JavaScriptなどのプログラミングまとめ、解説、備忘録。

user-scalableどうするか

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

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

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

Cookpad => 拡大できない

f:id:tkot:20160326170909p:plain:w300

f:id:tkot:20160326170914p:plain:w300

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

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

f:id:tkot:20160326170919p:plain:w300

f:id:tkot:20160326170923p:plain:w300

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

Yahoo => 一部できる

f:id:tkot:20160326170928p:plain:w300

トップはできなかったが

f:id:tkot:20160326170932p:plain:w300

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

はてブ => できない

f:id:tkot:20160326170936p:plain:w300

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

Amazon => できない

f:id:tkot:20160326170940p:plain:w300

朝日新聞 => できない

f:id:tkot:20160326170945p:plain:w300

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

Naverまとめ => できない

f:id:tkot:20160326170948p:plain:w300

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

Wikipedia => できる

f:id:tkot:20160326170952p:plain:w300

楽天 => できない

f:id:tkot:20160326170954p:plain:w300

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

Apple => 拡大できる

f:id:tkot:20160326171002p:plain:w300

Google => 一部できる

f:id:tkot:20160326171005p:plain:w300

f:id:tkot:20160326171008p:plain:w300

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

まとめ

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

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