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現在）
<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">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<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」っていう微妙な大きさにしているのが気になりますね。。これはなんでしょう。。気持ち、はみ出すくらいの感じにすることで、ちょうどいい何かがあるんでしょうねー。気になる。
