0531

脳内OUTPUT-ただのメモ書き-

meta viewportについて考える

そもそもmeta viewportって?

スマホサイトのソースを見てみると大体headの中にこの記述があります。

<meta name="viewport" content="...">

meta viewportは、文書の表示領域を設定するもので、スマートフォン向けの記述です。 スマートフォンはPCサイトを表示する際、ユーザーが使いやすいように幅を980pxに設定して表示します。 android端末が登場するまではiPhoneだけでしたから、今でも320pxで作られているサイトは多く、980pxで表示されてしまうと、320pxで作ったサイトが縮小されて表示されるので、文字などが非常に小さく見ずらくなってしまいます。

これを制御するのがmeta viewportです。 meta viewportを設定しておけば、ブラウザがサイトを表示する際、設定した値でレンダリングしてくれます。 (meta viewportをdevice-widthにしておけば使用端末ごとに表示を最適化します。)

viewportとは: viewportとは、ブラウザの「表示領域」のことです。

実践!スマホサイトのviewport設定 - viewportとはなにか? | CodeGrid

記述方法

記述方法はいくつか存在します。 ユーザーに拡大縮小させたくないサイトもあれば、させたいサイトもあり、 幅の指定を固定にしたいサイトもあれば、可変グリッドにしたいサイトもあるので書き方は様々。 しかし、必要のない記述をしているサイトが多くあるという記事を見かけたので、ここにメモしておきます。

blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる

プロパティ

meta viewportのプロパティは主に下記のものがあります。

* width:表示領域の幅 * height:表示領域の高さ * initial-scale:初期のズーム倍率 * minimum-scale:最小倍率 * maximum-scale:最大倍率 * user-scalable:ズームの操作

サイトの横幅が決まっている場合

サイトの横幅が決まっている場合、meta viewportを書く必要はありません。 どうしても書きたい場合は、

<meta name="viewport" content="width=(幅をピクセル数で指定)">

と記述しておきましょう。

実践!

blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる

このサイトにもあるように(なるほど…)

<meta name="viewport" content="initial-scale=1.0">

まとめ

viewportって意外にコピペで済ますことが多いんですが、 いざ説明してみると全然把握していないんですね。笑

これで聞かれても少しはましな回答ができるかな。