スマートフォンやタブレット向けにビューポート（表示領域の大きさ）とズーム操作の設定をしています。
HTML
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> |
補足
下記設定により、表示領域の幅を端末画面の幅とし、ズーム操作を許可しています。
プロパティの初期値と変更点
| プロパティ | 初期値 | 設定 |
| width | 980 ? | device-width |
| height | 自動 | |
| initial-scale | ? | 1.0 |
| minimum-scale | 0.25 | 1.0 |
| maximum-scale | 1.6 | |
| user-scalable | yes |
また、iOS 端末の縦持ちと横持ちで文字サイズが自動調整されるのを防ぐため、下記スタイルを設定しています（サンプルでは common.css 内で指定）。
CSS
1 2 3 | body { -webkit-text-size-adjust: 100%; /* 文字サイズの自動調節を無効にする for iOS */} |