4-1.ページが縮小表示される

ページの縮小表示はWebページから制御できる

samplejpg

スマートフォンでWebページを開いた時には、通常はページの全体像が把握できるように自動的に縮小表示されます。 普通のWebページを見る場合には便利な機能ですが、スマートフォンまで考慮してワザワザ小さい画面でも遊べるように作ったゲームページでは、この縮小機能は迷惑な代物です。

しかし、この縮小機能はWebページ側の設定でキャンセルする事もできます。

metaタグで縮小率を指定する

<meta name="viewport" content="width=device-width,
 initial-scale=1, maximum-scale=1">

metaタグでviewportを指定すると、横幅と初期倍率と最大倍率が指定できます。

上記では、横幅にdevice-widthを指定していますが、これは、そのデバイスの実際のピクセル数を指定している事になります。 初期倍率、最大倍率については1を指定していますので、縮小表示も拡大表示も禁止している事になります。

サンプルゲームに適用してみる

3章で作成した15パズルゲームをHVGA画面のAndroidエミュレータ上で動作させると、初期画面は以下のようになります。

このページに上記のmetaタグを追加すると、初期画面は以下のようになります。

不要な縮小処理が行われなくなり、そのままのサイズで操作できるようになりました。