iOSでのズーム無効化の方法

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

このコードでは、user-scalableプロパティをnoに設定しています。これにより、ユーザーはズーム操作を行えなくなります。

2. CSSを使用する方法: CSSを使用して、ズーム機能を無効にすることもできます。以下のようなCSSルールを適用することで、ズームを制限できます。

body {
  touch-action: manipulation;
}
@viewport {
  zoom: 1.0;
  user-zoom: fixed;
}

上記のコードでは、touch-actionプロパティをmanipulationに設定しています。これにより、スワイプ操作によるズームが無効になります。また、@viewportルールを使用して、ズームレベルを1.0に固定しています。

3. JavaScriptを使用する方法: JavaScriptを使用して、ズーム機能を制御することも可能です。以下のコードは、JavaScriptを使ってズームを無効化する例です。

document.addEventListener('touchmove', function(event) {
  if (event.scale !== 1) {
    event.preventDefault();
  }
}, { passive: false });

このコードでは、touchmoveイベントを監視して、ズーム時にイベントをキャンセルしています。

以上がiOSでのズーム無効化の方法といくつかのコード例です。これらの方法を使用することで、ユーザーがページをズームできないようにすることができます。適切な方法を選択し、必要に応じてコードをカスタマイズしてください。