HTMLコーディング時に viewport の設定で width、initial-scale、minimum-scale の指定方法が良く理解できなかったり、初心者が混乱することも多々あるのではないでしょうか？
「とりあえず、viewport の仕様は置いて、このサイトの設計の場合、何を指定すればいいの ？」
と思っている方向けに細かい説明は置いといて、２種類の設定から選択できるように解説を作成しました。また、メリット、デメリットも記述したので、こちらを参考に設定を選択して頂ければと思います。
※ 注意
設定確認時に initial-scale を設定、表示後に再度 viewport の設定を変更し、ブラウザの更新ボタンにて更新をしても設定内容が反映されないことがあります。その時はURLを再度読み込むか、Chrome のシミュレーターの場合は Device を一度別の端末を選択、元に戻す等で反映されます。されない場合は一度ご確認ください。
前提条件
・スマフォサイト用のHTML
・メディアクエリを利用しない。
１．画面の見た目を完全に固定したい場合。ピクセル、%にて設計(基準は固定値)
viewport の設定
<meta name="viewport" content="width=640" />
※ 注意
initial-scale を指定した場合、width=device-width と initial-scale と width で大きい方が適用される。
(初心者は混乱するので、width に数値固定を指定した場合、initial-scale を指定しないことをおすすめします。)
設定内容
・表示する端末全ての幅が仮想の 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 を利用した場合、画面の大きさによって見え方が異なるため設計と確認が必要
content で設定できる内容（カンマで区切ることで複数指定できます。）
width
画面の仮想の幅を指定します。
(例)
width=device-width
height
画面の仮想の高さを指定します。
(例)
height=640
initial-scale
初期表示時のスケールを指定します。
(例)
initial-scale=1.0
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 を同じにすると拡大、縮小ができなくなります。
最後に
・基本的には上記の２種類から選択すれば問題ないでしょう。
・詳しく理解できるようになった時に詳細な設定はお試しください。
・正解はありませんので、最終的にはそのサイトの設計に合った設定を考案し設定しましょう。
モダンなコーディングを学べる本
