viewport（ビューポート）の設定について理解を深める

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

私が普段使用しているviewportは上記のような指定です。
どこかのサイトでコピペしてそのまま使ってますが、viewportを指定するとどのような効果があるのか詳しく理解したいと思います。

name属性

name属性に指定している「 viewport 」は、スマホサイトの表示を意味しています。
viewportを指定していないと、PCサイトが縮小された表示になってしまい、拡大しないと見れないサイトになってしまいます。

content属性

以下指定出来るプロパティになります。

width（横幅）

数値

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

指定できる範囲は、「 200px〜10000px 」まで、初期値は「 980px 」になっています。
上記のように指定した場合、表示するデバイスの幅が640px以上だと拡大されて表示される。また640px以下だと逆に縮小されて表示される。

device-width

<meta name="viewport" content="width=device-width">

この場合は横幅が自動的にデバイスに合わせて指定されます。

height（縦幅）

数値

<meta name="viewport" content="height=640">

横幅と同じように指定できる範囲は、「 200px〜10000px 」まで、初期値は「 自動 」になっています。

device-height

<meta name="viewport" content="height=device-height">

デバイスの高さに自動で合わせることが出来ます。

initial-scale（初期倍率）

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

初期のズーム倍率を数値で指定出来ます。
例えば数値を「 2 」とした場合、2倍ズームで表示されてしまうので横にスクロールできる状態で表示されます。
数値の範囲は、minimum-scaleとmaximum-scaleの範囲内で指定することが出来ます。
またwidth=device-widthを指定していて、initial-scaleを指定しない場合は、initial-scale=1と自動的になります。

minimum-scale（最小倍率）

<meta name="viewport" content="minimum-scale=0.5">

ユーザーがズームできる最小倍率を指定します。
初期値は「 0.25 」で、0以上10未満の数値を指定出来ます。

maximum-scale（最大倍率）

<meta name="viewport" content="maximum-scale=2">

ユーザーがズームできる最大倍率を指定します。
初期値は「 1.6 」で、0以上10未満の数値を指定出来ます。

minimum-scale と maximum-scaleの組み合わせ

<meta name="viewport" content="minimum-scale=0.5 , maximum-scale=2">

上記のように指定するとユーザーは0.5倍〜2倍の範囲でズームすることが出来ます。

user-scalable（ズーム操作）

<meta name="viewport" content="user-scalable=no">

ズーム操作を無効化することが出来ます。初期値は「 yes 」になっているので「 no 」にします。
※iOS10以降だとこの属性は効かないようです。

まとめ

最終的にどの指定がいいのか？

<meta name="viewport" content="width=device-width">

これだけでいい気がします。
「 width=device-width 」を指定するならば、「 initial-scale 」は自動的に「 initial-scale=1 」になりますし、「 minimum-scale 」と「 maximum-scale 」と「user-scalable」はユーザビリティ的に自由にしたほうがいいと思うので。
もしよければ参考にされてください。