用途
新着
履歴
分類

HTML 幅やズームのviewportの設定

HTML 幅やズームのviewportの設定
viewportの設定のデバイスに対してコンテンツの幅やズーム操作をどう扱うか設定をするサンプルです。

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倍で表示したいときは 2 と入れることになります。


minimum-scale=1

縮小時したときの最低サイズの指定できます。

これが1だとズームアウトできないことになります。

ズームアウトするとコンテンツが広がるので数値は大きく指定します。

ピンチアウトしたときに初期値が300pxのコンテンツが、600pxに広がって小さくなるなら 2 を設定します。


maximum-scale=1

拡大時したときの最大サイズです。

つまり1だとそれ以上ズームインできないことになります。

ズームインするとコンテンツが大きく見えるのでその倍率は大きく指定します。

ピンチインしたときに初期値が300pxのコンテンツが、2倍のサイズまで大きく見えるようにするなら 2 を設定します。

公開 2019-10-29 15:35:35
このページの二次元コード
HTML 幅やズームのviewportの設定

人気のサンプル

search -  category -  about
© 2024 kipure
Top