viewport の設定

name="viewport"
これがスマートフォンのサイトですよという合図

content="width=device-width"
幅をデバイスの幅に合わせてねって指示
端末ごとのサイズに応じてフレキシブルな表示ができる一方、細かい表示の統一はやりづらい。

content="width=480"にすると幅480pxの仮想的なウインドウが作られる。
JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。

数字を明確に指定しているので端末ごとの表示を統一できるが、逆に言うと大きな画面サイズの端末でも小さな画面サイズの端末と同じ表示になるため、スペースの有効活用ができない

initial-scale=1.0
初期表示時のスケールを指定します。
initial-scaleに1より小さな値は使わないのが無難

その他
minimum-scale
ズームイン時の最小スケールを指定します。
(例)
minimum-scale=1.0

maximum-scale
ズームアウト時の最大スケールを指定します。
(例)
maximum-scale=0.5

user-scalable
ユーザがスケールイン、アウト可能かの設定
(例)
user-scalable=no

target-densitydpi

Android の場合、密度を指定できます。
(例)
target-densitydpi=device-dpi

縦向き、横向きで文字の大きさを変えたくない場合
css で body に下記を設定
-webkit-text-size-adjust: 100%;

ズームイン、ズームアウトについて
・user-scalable=no で設定すると拡大、縮小ができなくなります。
・maximum-scale 、 minimum-scale 、initial-scale を同じにすると拡大、縮小ができなくなります。

他
★画面の見た目を完全に固定したい場合。ピクセル、%にて設計(基準は固定値)
viewport の設定

<meta name="viewport" content="width=640" />

initial-scale を指定した場合、width=device-width と initial-scale と width で大きい方が適用される。

・表示する端末全ての幅が仮想の 640 で固定され、解像度が大きい端末では 640 を基準として拡大表示され、解像度が小さい端末では小さく縮小表示されます。
・画面の横幅が1000px だろうが、仮想で横幅 640 で計算され 1000px の画面全体に仮想画面の 640 で表示されます。
・画面設計は横幅 640 で設計します。
・% 指定でコーディングしても問題ありません。

・端末の画面の大きさが小さくても、大きくても表示される内容の比率は固定されるため、見た目が変わらない。
・% で指定しても px で指定しても、基本的には等倍で表示されるので全ての端末で同じように表示させられる。
・画面設計がシンプルになる。
・横幅を指定し設計ができるため設計が容易である。

・小さい端末では文字、画像が小さく、大きい端末では文字、画像が大きくなります（フォントサイズを画面比率で指定した場合）。
・端末が大きくても表示される内容もそのまま拡大されるだけなのでユーザビリティ的には少々悪い（タブレットの場合は全体の大きさはそのままに情報量を増やしたほうが好ましい）。ただし、タブレット等ではメディアクエリーを利用で切り分ける方法もある。

★画面のサイズを端末の横幅サイズに合わせたい場合　% 指定で全て等倍も可能
viewport の設定

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
(iPhone6 の場合、375)
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
(iPhone6 の場合、750)

・設定されるサイズは端末のピクセル単位で設定される。
・全て%で指定した場合、その１と同じ用に全ての端末で等倍表示させることも可能。
・スマフォの場合はポイントサイズが基準となるため 0.5 を設定することでピクセル数の解像度で横幅を設定できます。1 で設定した場合、ポイント数が設定されるため、解像度の半分のピクセル数が設定されます。
・表示する端末によって画面の幅が異なるため、コンテンツを等倍で表示したい場合は、スタイルで % を指定します。
・端末サイズに関係なく同じサイズで表示したい場合は px で指定します。(dpi が同じと仮定)
・画面サイズが保証できないため基本的には px で指定しない方が好ましい、ただし、理解して指定する場合は問題ない。padding は px で、内容は % で指定など。

・% を利用することで異なる画面サイズでも等倍表示することができるため、基本的に % 単位にて設計できます。
・px を利用することで px を利用して（ dpi が同じと仮定）異なる画面サイズでも同じ大きさで表示させることができます。
・% 指定、px 指定の両方を指定して設計することも可能、柔軟に指定できるため基本的にはこちらがおすすめ。
・タブレットなど、画面が大きい端末には項目を多く表示させる設計も可能。
・全て % で指定した場合、どの端末で同じ大きさで表示させることが可能です。

・px を利用した場合、画面の大きさによって見え方が異なるため設計と確認が必要