レスポンシブでサイトを制作する場合、HTMLでviewport、CSSでメディアクエリ、両方を設定する必要があります。CSSでメディアクエリを記述しても、viewportがなければ動きません。viewportでwidth=device-widthの指定があれば、ブレイクポイントによる切り替えが可能になります。
最適なviewportの設定ですが、スマートフォンで縮小表示する必要性はあまりないため、通常は「拡大・縮小なし」または「拡大あり・縮小なし」でviewportを設定します。
拡大・縮小なし
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">拡大あり・縮小なし
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">viewportで指定できる主な設定は以下になります。
width（横幅）
初期値960px。指定できる範囲は200px〜10000px。その他、デバイス幅に合わせるdevice-widthがあります。
initial-scale（初期倍率）
通常はinitial-scale=1を指定します。
minimum-scale（最小倍率）
初期値0.25。0より大きく10未満の値を指定します。initial-scale=1,minimum-scale=1の場合、縮小できなくなります。
maximum-scale（最大倍率）
初期値1.6。0より大きく10未満の値を指定します。
user-scalable（ユーザーのズーム操作の可否）
初期値yes。ユーザーのズーム操作を許可しない場合、user-scalable=noを指定します。
viewport-fit（ビューポートが画面をどのように埋めるか制御）
初期値auto。iPhone XのSafariで表示される左右の空白を消す方法として、viewport-fit=coverの指定が有効です。
