HTML | スマートフォンでのズームを許可または無効にする方法
HTMLのmetaを編集してスマートフォンなどの端末操作でのズームを許可または無効にする方法を紹介しています。
一般的にはユーザーによるコンテンツの拡大縮小が可能なことがユーザビリティの面からも推奨されていますが、例えばゲームなどのコンテンツによっては拡大縮小させたくない場合があります。
そういったWEBコンテンツに対して、スマートフォンやタブレット端末でのユーザーによるズームを無効にする事が可能です。
スマートフォンでのズームを有効にする
スマートフォンでのズームを無効にするにはページの meta name="viewport" に user-scalable にてyesまたは1を指定することで設定可能です。
有効にしている場合、maximum-scale で最大倍率、maximum-scaleで最小倍率、それぞれの設定値が反映されます。
minimum-scale の値を1.0とする事で、標準サイズ以下への縮小のみ無効にする事が可能です。
一般的に多い記述では拡大可能で、縮小は制限を付けている設定になっていおり、以下のように記述します。
user-scalable は未指定の場合はデフォルトで有効になっています。
maximum-scale も制限を付けない場合は必要ありませんので、以下のHTMLコードとなります。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">スマートフォンでのズームを無効にする
スマートフォンでのズームを無効にするにはページの meta name="viewport" に user-scalable=no を指定することで設定可能です。
以下はそのサンプルコードになります。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />