HTML5のレスポンシブデザインでズーム機能を無効にする方法

レスポンシブデザインでズーム機能を無効にするには？

HTML5を使用したレスポンシブデザインにおいて、ユーザーによるズーム操作を無効にしたい場合は、viewport（ビューポート）メタタグを利用します。このタグは、スマートフォンやタブレットなどのモバイルデバイスでWebページをどのように表示するかをブラウザに指示するためのものです。

user-scalable属性を「no」に設定する

ズーム機能を無効にするには、viewportメタタグ内のuser-scalableプロパティをnoに指定します。

user-scalable=no

実際のコード例

HTMLファイルのheadセクション内に、以下のmetaタグを追加することで、ズーム機能を無効化できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

各プロパティの意味

• width=device-width： ページの幅をデバイスの画面幅に合わせて設定します。
• initial-scale=1.0： ページ読み込み時の初期拡大率を100%（等倍）にします。
• maximum-scale=1.0： 拡大できる最大倍率を100%に制限します。
• user-scalable=no： ユーザーによるピンチイン・ピンチアウトなどのズーム操作を無効にします。

アクセシビリティへの注意点

ズームを無効にすると、視覚に障害を持つユーザーが文字を拡大できなくなる可能性があります。そのため、アクセシビリティの観点からは、本当に無効化が必要かどうかを慎重に検討することが重要です。また、iOSのSafariなど一部のモダンブラウザでは、ユーザビリティ保護のためuser-scalable=noが無視される場合がある点にも留意しましょう。