meta viewportについて考える
そもそもmeta viewportって?
スマホサイトのソースを見てみると大体headの中にこの記述があります。
meta viewportは、文書の表示領域を設定するもので、スマートフォン向けの記述です。 スマートフォンはPCサイトを表示する際、ユーザーが使いやすいように幅を980pxに設定して表示します。 android端末が登場するまではiPhoneだけでしたから、今でも320pxで作られているサイトは多く、980pxで表示されてしまうと、320pxで作ったサイトが縮小されて表示されるので、文字などが非常に小さく見ずらくなってしまいます。
これを制御するのがmeta viewportです。 meta viewportを設定しておけば、ブラウザがサイトを表示する際、設定した値でレンダリングしてくれます。 (meta viewportをdevice-widthにしておけば使用端末ごとに表示を最適化します。)
実践!スマホサイトのviewport設定 - viewportとはなにか? | CodeGrid
記述方法
記述方法はいくつか存在します。 ユーザーに拡大縮小させたくないサイトもあれば、させたいサイトもあり、 幅の指定を固定にしたいサイトもあれば、可変グリッドにしたいサイトもあるので書き方は様々。 しかし、必要のない記述をしているサイトが多くあるという記事を見かけたので、ここにメモしておきます。
blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる
プロパティ
meta viewportのプロパティは主に下記のものがあります。
サイトの横幅が決まっている場合
サイトの横幅が決まっている場合、meta viewportを書く必要はありません。 どうしても書きたい場合は、
と記述しておきましょう。
実践!
blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる
このサイトにもあるように(なるほど…)
まとめ
viewportって意外にコピペで済ますことが多いんですが、 いざ説明してみると全然把握していないんですね。笑
これで聞かれても少しはましな回答ができるかな。