スマホでwebサイトを見た時に表示領域やズームなどを設定できるviewportのまとめです。
基本の書き方
htmlのmeta要素として、head内に記述します。
viewportはスマホのみに働き、PCでの見た目には何も影響しません。
<meta name="viewport" content="width=device-width, initial-scale=1"/>
name="viewport"とし、content内にプロパティと値を指定します。
| プロパティ | デフォルト | 指定値できる値 | 内容 |
|---|---|---|---|
| width | 980px | 200～10,000px もしくは device-width |
表示される幅 |
| height | – (良い感じに計算される) | 200～10,000px もしくは device-height |
表示される高さ |
| minimum-scale | 0.25 | 0-10 | 縮小した時の最小値 |
| maximum-scale | 1.6 | 0-10 | 拡大した時の最大値 |
| user-scalable | yes | yes もしくは no |
ユーザによる拡大・縮小の可否 |
| initial-scale | – (良い感じに計算される) | minimum-scale からmaximum-scaleで指定した範囲 | ユーザによる拡大・縮小の可否 |
上記デフォルトはiPhoneの場合
結局どう書けばいいの？
案件により異なりますが、たぶん大きく分けて以下の2通りになると思われる。
スマホ対応ページを作った場合
「幅はそのスマホに合わせる、拡大縮小はさせないよ」
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no, initial-scale=1"/>
きちんとモバイル端末のことを考えて作られているならこれで問題なし。
PC用のページをスマホでも見れるようにしたい
「とりあえず画面全体を見れるようにしてくから、ユーザが拡大縮小して見てね」
<meta name="viewport" content="width=【サイトの幅】"/>
何も指定しなくても案外うまいこといくけど、幅だけでも指定しておこう。