HTMLのmeta情報にviewportというコンテンツをデバイスに対してどう扱うか設定する機能があります。
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1" >こんな感じでheadの中に指定します。
-- content="[この部分]"、ここにいろいろな情報を書きます。width=device-width あるいはピクセル数コンテンツの幅の指定です。
device-widthはデバイスの「横幅いっぱいまで」でピクセル数はその値までとなります。
user-scalable=yes拡大縮小を許可します。
noにするとピンチインで拡大できなくなります。
1,0でも指定できますが以下と混同するので避けたいです。
initial-scale=1コンテンツの表示スケール（ズーム率）を指定できます。
1が100%です。拡大できるのであれば初期値となります。
２倍で表示したいときは 2 と入れることになります。
minimum-scale=1縮小時したときの最低サイズの指定できます。
これが１だとズームアウトできないことになります。
ズームアウトするとコンテンツが広がるので数値は大きく指定します。
ピンチアウトしたときに初期値が300pxのコンテンツが、600pxに広がって小さくなるなら 2 を設定します。
maximum-scale=1拡大時したときの最大サイズです。
つまり１だとそれ以上ズームインできないことになります。
ズームインするとコンテンツが大きく見えるのでその倍率は大きく指定します。
ピンチインしたときに初期値が300pxのコンテンツが、２倍のサイズまで大きく見えるようにするなら 2 を設定します。
