viewportの書き方とイケてるスマホサイトのviewport 2018年版

「viewport」とは何?


スマホサイトを作る際に、呪文のように書くmetaタグ「viewport」。

あまり理解せずに書く人も多いのですが(と言っても、難しいものでもない)、簡単にいえば、表示するモニターサイズ(横幅)をどのくらいに設定するのか、ってことを指定できるもの。

<meta name="viewport" content="width=360,initial-scale=1">


こうやって書けば、横幅360pxのモニターにピッタリ合わせたサイトを表示してくれるってことです。
なので、このviewportで書かれたサイトを、横幅300pxのモニターで見た場合、60px程度はみ出しちゃうってことですね。

スマホなんてのは、モニターサイズは様々なので、それぞれの端末ごとにピッタリ合わせて欲しいわけで。そんな時の書き方が、

<meta name="viewport" content="width=device-width,initial-scale=1">


ってやつで、端末(デバイス = device)ごとの横幅(width)に合わせてねっていう呪文になるんですね。

viewport の content に指定できる属性


さっきから、「横幅」とか言ってますが、別に横幅だけでなく「高さ」を指定することだってできます。
そういった細かい設定は、「content」の中で指定できます。

contentで指定できる属性をざっとご紹介します。

width
表示領域の幅を指定できます。
数値の場合、200px~10000pxの範囲。初期値は 980です。
数値ではなく「device-width」にすると、端末画面の幅に合わせることができます。

height
表示領域の高さを指定できます。
数値の場合、233px~10000pxの範囲。初期値は自動です。
数値ではなく「device-height」にすると、端末画面の高さに合わせることができます。

initial-scale
初期のズーム倍率です。
数値で指定します。後述する、minimum-scale~maximum-scale の範囲で指定が可能です。

minimum-scale
最小倍率です。
数値で、0~10の範囲で指定可能。初期値は 0.25です。

maximum-scale
最大倍率です。
数値で、0~10の範囲で指定可能。初期値は 1.6です。

user-scalable
ズーム操作を許可するかしないかを設定します。
yesだと許可 (初期値)。noだと許可しないとなります。

ということで、上記を踏まえた上で、スマホ向けサイトの一般的なviewportは

<meta name="viewport" content="width=device-width,initial-scale=1">


になるわけです。

イケてるサイトのviewport一覧


有名サイトのスマホページのviewportは一体どうなっているのか、調べてみました(2017/7/22現在)

google

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


yahoo!

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">


Apple

<meta name="viewport" content="width=device-width, initial-scale=1">


twitter

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">


facebook

<meta name="viewport" content="user-scalable=no,initial-scale=1.0001,maximum-scale=1.0001">


インスタグラム

<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">



どのサイトもだいたい一緒ですね。user-scalableを許可するか、しないか。この部分をサイトのポリシーとして決める感じでしょうか。

ところで、facebookのscaleが、「1.0001」っていう微妙な大きさにしているのが気になりますね。。これはなんでしょう。。気持ち、はみ出すくらいの感じにすることで、ちょうどいい何かがあるんでしょうねー。気になる。




あわせて読みたい