サイトをスマートフォン用に制作したとしても、実際にスマートフォンから見てみると画面サイズがうまくフィットしていなかったりしますよね。
そんな時には下記のmetaタグをhtmlに記述することでスマートフォンでの表示サイズをコントロールできるようになります。

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

width

• デフォルト：980px
• 設定範囲：200～10,000px

サイトの横幅を指定します。
例えば横幅1024pxでサイトを制作している場合、

<meta name="viewport" content="width=1024px, initial-scale=1, maximum-scale=2">

とすればiPhone,ipad,ipod,Android端末の横幅にサイトをぴったり合わせてくれます。

height

• デフォルト：横幅に合わせて制御
• 設定範囲：200～10,000px

サイトの縦幅を指定します。
こちらもwidthと一緒で

<meta name="viewport" content="height=768px, initial-scale=1, maximum-scale=2">

とすれば、スマートフォンの縦幅に合わせてくれます。

initial-scale

• デフォルト：横幅に合わせて制御
• 設定範囲：minimum-scale と maximum-scale で指定した値の間

サイト表示時の初期倍率です。

<meta name="viewport" content="width=1024px, initial-scale=1, maximum-scale=2">

とした場合、1倍で表示されます。

<meta name="viewport" content="width=1024px, initial-scale=2, maximum-scale=2">

なら2倍表示です。

minimum-scale

• デフォルト：0.25
• 設定範囲：0～10

user-scalable が yes に設定されている場合、ピンチアウト等でユーザーが縮小できる最小値です。

maximum-scale

• デフォルト：1.6
• 設定範囲：0～10

user-scalable が yes に設定されている場合、ピンチイン等でユーザーが拡大できる最小値です。

user-scalable

• デフォルト：yes
• 設定範囲：yes / no

拡大縮小の可否を設定します。可能にする場合yes