meta要素でのページ拡大率の設定
ビューポートの設定はmeta要素で指定することができます。「ビューポートとは」を参照。
meta要素で指定できるのはビューポートの横幅だけではありません。ページの拡大率を設定することもできます。
拡大率は「initial-scale=値」を使用します。値は数字を入れて何倍に拡大したいか決めます。1は1倍、2は2倍、小数も使用可能で0.5は半分になります。
例
<meta name="viewport" content="width=device-width,initial-scale=1">
「initial-scale=値」はページを拡大縮小のための設定だと直感的にわかりやすい概念のような気がしますが、頭が混乱してしまいそうな落とし穴があります。
initial-scaleとdensity
initial-scaleを指定するとdensityがコントロールされてビューポートが設定されてしまうことです。
例えばviewportの設定で幅をcontent=”width=860と指定してinitial-scale=1を設定したとします。
これは拡大率が1つまり1倍ですから、initial-scale=1を指定する必要はないと考えてこの記述を省略した場合に結果が変わってきます。
その例が以下のものです。
initial-scale=1を設定した例
<meta name="viewport" content="width=860,initial-scale=1">
initial-scale=1を設定した結果
initial-scale=1を設定することでdensityがコントロールされてビューポートが設定されます。例えばiPhoneではwidth=device-widthで指定したときと同様に320ピクセルの横幅の解像度で表示します。文字サイズがwidth=device-widthの時と同じサイズであることに注目してください。けれどもページの幅の指定は860ピクセルとなっているため横スクロールが出てきて横スクロールすることで非表示部分を読むことができるような表示になります。画像も860ピクセルの横幅がありますので大部分が隠れた状態での表示になります。
この設定を行うと解像度は横幅320ピクセルで表示するような解像度に変更され、さらに可変レイアウトが横幅860ピクセルの固定レイアウトに設定されたかのような表示になります。
initial-scale=1を省略した例
<meta name="viewport" content="width=860">
initial-scale=1を省略した結果
この場合はiPhoneではページ全体を横幅320ピクセルで表示するようにページ全体が縮小されます。
content=”width=device-widthにinitial-scale=1を設定した例
<meta name="viewport" content="width=device-width,initial-scale=1">
content=”width=device-widthにinitial-scale=1を設定した結果
この場合はページ全体を横幅320ピクセルで表示するような解像度に変更されます。このページは可変レイアウトのため横幅が320ピクセル内にページが収められており、文字のサイズが横幅320ピクセルで表示するような解像度になります。最初の例と同じ文字サイズであることに注目してください。
content=”width=device-widthにinitial-scale=2を設定した例
<meta name="viewport" content="width=device-width,initial-scale=2">
content=”width=device-widthにinitial-scale=2を設定した結果
この場合はiPhoneではページ全体を横幅320ピクセルとしますが、ビューポートの横幅（表示幅）は160ピクセルとなります。横スクロールが必要になります。
content=”width=device-widthにinitial-scale=0.5を設定した例
<meta name="viewport" content="width=device-width,initial-scale=0.5">
content=”width=device-widthにinitial-scale=0.5を設定した結果
この場合はiPhoneではページ全体を横幅320ピクセルとしますが、ビューポートの横幅（表示幅）は640ピクセルとなります。
ユーザーによる拡大の禁止と制限
ユーザーによる拡大の禁止
ユーザーがピンチにより拡大縮小ができなくする設定はmeta要素に以下を設定します。
<meta name="viewport" content="width=device-width,user-scalable=no">
ユーザーによる拡大の禁止１
現在Androidの一部ブラウザは対応していません。（Chrome for Android）その場合は以下で対応できます。
<meta name="viewport" content="width=device-width,user-scalable=no">
ユーザーによる拡大の制限
ユーザーによる拡大表示の制限をしたい場合に使用します。以下の例は拡大表示は2倍までしかできません。
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=2">
コメントを投稿するにはログインしてください。