<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">このコードは、ビューポートの幅をデバイスの幅に設定し、初期ズームレベルを1に設定し、ユーザーがズームを行えないようにします。
- CSSのtouch-actionプロパティを使用する方法: CSSのtouch-actionプロパティを使用することで、特定の要素上でのタッチ操作を制御できます。以下のコードは、body要素上でのズームを無効化する例です。
body {
touch-action: manipulation;
}このコードは、body要素上でのタッチアクションを manipulation に設定することで、ズームを無効化します。
- CSSのpointer-eventsプロパティを使用する方法: CSSのpointer-eventsプロパティを使用すると、特定の要素または要素内のコンテンツに対するイベントの処理方法を制御できます。以下のコードは、特定の要素上でのズームを無効化する例です。
.disable-zoom {
pointer-events: none;
}このコードは、クラス名が "disable-zoom" の要素上でのイベント処理を無効化することで、ズームを制限します。
これらの方法を組み合わせて使用することもできます。ただし、ユーザビリティに配慮し、適切な状況でのみズーム無効化を行うようにしてください。ユーザーがコンテンツを読みやすくするためにズーム機能を使用することが期待される場合は、無効化しない方がよいでしょう。
以上がモバイルでのCSSによるズーム無効化の方法とコード例です。