強気タイトルでごめんなさい。
最近のモバイルページのサイズ指定に思うところがあったので投稿させていただきます。
twitterで流れてきて気になったのですが、どのデバイスで見ても同じように見えるようにとサイズ指定をvwを使われるケースが多くなってきているそうな。
これ、やる気持ちはすごくわかるんですよね。
けどちょっと待ってくれ、本当にそれでいいのか？という内容の記事です。
なぜvwを使うのか
上にも書かせてもらったように、vwでサイズ指定してあげるとどのデバイスでみた時にも同じような見え感になるからという理由でvwを採用している方が多いかと思います。
デザイナーに用意していただいたものそのままで再現できますもんね。
僕もちょっと前には「vw最高やん」とSPのcssにはほぼ全てのサイズ指定をvwでやっていた時期がありました。
けどこれに疑問を持ち始めた原因が、Nexus7という端末です...
何がおこったのか
僕の日頃担当させていただているサイトでは、横幅768px（iPadサイズ）を境にしてPCとSPの2パターンをmediaqueryで切り替えて実装しています。
当時、PCにはサイズ指定をpxで絶対指定しつつ、SPの方はvwを使っており、
vwの計算をいちいちするのも時間がかかるのでpx↔︎vw変換表なんてものをExcelで作って印刷したものを手元において「スピーディーにコーディングできてるわ！」と浮かれていたものです。
ところが実家に帰った時に使われていたNexus7（横幅600px）という端末でページをみた時に感じちゃったんですよね。
「デケェ...」
サイズ的にNexus7ではSPレイアウトが表示されます。
別にデザインが崩れたりしていたわけじゃないんですけど、
不必要に文字サイズが大きくなりすぎているのが気になってしまいました。
そしてこれを機にvw指定を見直すことになったわけです。
vwの良くない点
タブレットの利点を無くす
タブレット系のデカめ端末の利点って、スクロールをしなくても1画面で多くの情報を同時に見えることだと思うんですよね。
けどこれをvwで指定しちゃってると普通のケータイと見えるのと変わんなくなってその利点が死ぬ。
まあ僕のきっかけになったNexus7はもう古い端末なんでそんなに気にしなくてもいいかもですけど、情報が多く見えるって利点を無くしちゃうのはあんまりよろしくないかと。
retina対応
僕は綺麗なページが好きです。
綺麗なページを作るためなら多少めんどくさくてもretina対応させるために、画像サイズを2倍で用意してcssで半分のサイズに縮めて表示ってことをやってます。この元画像の半分サイズってのが大事でそれを実現するにはpxで絶対指定してあげるしかないかと思ってます。
じゃあ画像のサイズ指定だけpxで他はvwを使って...てしちゃうと次は端末によってトンマナが合わなくなってきちゃいます。
例えば、特殊なフォントを使いたい部分ってhtmlじゃなくて画像で対応することってありますよね。けど画像サイズは固定なのに、文字サイズはvwだと何が起こるでしょうか？
特殊フォントって見出しとかに使ったりすることが多いんですよね。見出しより普通のテキストがデカい！みたいなことが起こり得るわけです。
めんどくさい。
px使いに戻って振り返ると、やっぱりいちいちPSDとかXDに指定されてるpxをvwに変換して、、、ってめんどくさいよなと。
めんどくさくてもそれで綺麗なページができるなら僕はやりますよ！
けど上の問題を抱えながら時間をかけてまでやることじゃねーという結論に至りました。
まとめ
vwが良くない理由を書かせていただきましたが、px指定にも問題はあるなとは感じでます。
端末によって嫌な位置で改行されることになっちゃって悩んだりとかね。
結局僕は上のようなことで悩んだ結果px指定に戻ったワケなんですけど、世間的にはあまり絶対指定にポジティブな意見が見えなかったのでどうなんでしょう。
閲覧ありがとうございました。
ps
font-sizeにmax-sizeが指定できたりすると結構解決できたりするのかなとか思ったりします。
mediaqueryのパターン分けを2つより増やすってのはむずかしいです、工数的に。やってるとこもあんまり見かけないですよね。
タイトルに「font-sizeに..」って書いちゃったんですけど、font-sizeに限らずvw指定やめようって記事になっちゃいました。