解 説

meta要素でのページ拡大率の設定

ビューポートの設定はmeta要素で指定することができます。「ビューポートとは」を参照。
meta要素で指定できるのはビューポートの横幅だけではありません。ページの拡大率を設定することもできます。
拡大率は「initial-scale=値」を使用します。値は数字を入れて何倍に拡大したいか決めます。1は1倍、2は2倍、小数も使用可能で0.5は半分になります。

「initial-scale=値」はページを拡大縮小のための設定だと直感的にわかりやすい概念のような気がしますが、頭が混乱してしまいそうな落とし穴があります。

initial-scaleとdensity

initial-scaleを指定するとdensityがコントロールされてビューポートが設定されてしまうことです。
例えばviewportの設定で幅をcontent=”width=860と指定してinitial-scale=1を設定したとします。
これは拡大率が1つまり1倍ですから、initial-scale=1を指定する必要はないと考えてこの記述を省略した場合に結果が変わってきます。
その例が以下のものです。

initial-scale=1を設定した例

initial-scale=1を設定した結果
IMG_0035
initial-scale=1を設定することでdensityがコントロールされてビューポートが設定されます。例えばiPhoneではwidth=device-widthで指定したときと同様に320ピクセルの横幅の解像度で表示します。文字サイズがwidth=device-widthの時と同じサイズであることに注目してください。けれどもページの幅の指定は860ピクセルとなっているため横スクロールが出てきて横スクロールすることで非表示部分を読むことができるような表示になります。画像も860ピクセルの横幅がありますので大部分が隠れた状態での表示になります。
この設定を行うと解像度は横幅320ピクセルで表示するような解像度に変更され、さらに可変レイアウトが横幅860ピクセルの固定レイアウトに設定されたかのような表示になります。

initial-scale=1を省略した例

initial-scale=1を省略した結果
IMG_0034
この場合はiPhoneではページ全体を横幅320ピクセルで表示するようにページ全体が縮小されます。

content=”width=device-widthにinitial-scale=1を設定した例

content=”width=device-widthにinitial-scale=1を設定した結果
IMG_0036
この場合はページ全体を横幅320ピクセルで表示するような解像度に変更されます。このページは可変レイアウトのため横幅が320ピクセル内にページが収められており、文字のサイズが横幅320ピクセルで表示するような解像度になります。最初の例と同じ文字サイズであることに注目してください。

content=”width=device-widthにinitial-scale=2を設定した例

content=”width=device-widthにinitial-scale=2を設定した結果
IMG_0040
この場合はiPhoneではページ全体を横幅320ピクセルとしますが、ビューポートの横幅(表示幅)は160ピクセルとなります。横スクロールが必要になります。

content=”width=device-widthにinitial-scale=0.5を設定した例

content=”width=device-widthにinitial-scale=0.5を設定した結果
IMG_0041
この場合はiPhoneではページ全体を横幅320ピクセルとしますが、ビューポートの横幅(表示幅)は640ピクセルとなります。

ユーザーによる拡大の禁止と制限

ユーザーによる拡大の禁止

ユーザーがピンチにより拡大縮小ができなくする設定はmeta要素に以下を設定します。

ユーザーによる拡大の禁止1
現在Androidの一部ブラウザは対応していません。(Chrome for Android)その場合は以下で対応できます。

ユーザーによる拡大の禁止2

ユーザーによる拡大の制限

ユーザーによる拡大表示の制限をしたい場合に使用します。以下の例は拡大表示は2倍までしかできません。

ユーザーによる拡大の制限のサンプル