こんにちは。
下記のコードは身近なものではないだろうか？
<meta name="viewport" content="width=device-width, initial-scale=1">
恥ずかしながら今まではviewportをコピペしていたので理解を深めるために書こうと思う。
Viewportとは？
A viewport is a polygon viewing region in computer graphics. Wikipedia
つまり、コンピュータ画像の中の表示領域のことである。
具体例としてあげるなら、PCであるWebサイトを開いた場合とスマホで開いた場合では、
コンテンツの場所が違ったり、縮小されてだけだったり、壊れていたり・・・・など様々だと思う。
そのようなモバイル端末にWebサイトを対応させる時に上記のコードを利用するのだ。
それでは、このviewportのcontentの中で指定できるものを見ていこう。
- width
- height
- initial-scale
- minimum-scale
- maximum-scale
- user-scalable
- etc ・・・
| 値 | 設定可能値 | 説明 |
|---|---|---|
| width | 正の整数または device-width | ウェブサイトを描画したいビューポートの幅をピクセル数で定義する。 |
| height | 正の整数または device-height | ビューポートの高さを定義する。どのブラウザーでも使用されていません。 |
| initial-scale | 0.0 から 10.0 までの、正の数値 | デバイスの幅 (ポートレートモードでの device-width またはランドスケープモードでの device-height) とビューポートの寸法との比率を定義する。 |
| minimum-scale | 0.0 から 10.0 までの、正の数値 | ズームの最大値を定義します。この値は minimum-scale と同じまたはより大きくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。 |
| maximum-scale | 0.0 から 10.0 までの、正の数値 | ズームの最小値を定義します。この値は maximum-scale と同じまたはより小さくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。 |
| user-scalable | yes または no | no を設定すると、ユーザーはページのズームができなくなります。既定値は yes です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。 |
MDNから引用
この中でもよく使うwidthとinitial-scaleを見ていきたい。
width
viewportの横幅をピクセル単位で指定する。
初期値は960pxで、指定できる範囲は200px〜10000px。
device-widthは、横幅がデバイスの横幅となるように指定される。
initial-scale
初期倍率を設定する。
width=device-widthとしてinitial-scaleを指定しない場合は、自動的にinitial-scale=1となる。
簡単のように見えて、理解をして使うことは大切ですよね。