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」っていう微妙な大きさにしているのが気になりますね。。これはなんでしょう。。気持ち、はみ出すくらいの感じにすることで、ちょうどいい何かがあるんでしょうねー。気になる。