iOS Safariでダブルタップで拡大しないようにする

iOS Safariでダブルタップした際に拡大表示する機能がありますが、例えばゲーム系のコンテンツで連打することがある場合など、要素やタイミングによっては拡大しないようにしたいことがあります。
今回はダブルタップでの拡大周りについていくつか調べる機会があったので、その内容を備忘録としてメモしておきます。
今回確認したiOSのバージョンは15.7.5 と15.6(iPad)になります。

ボタンの例

まずはbuttonタグの場合を試してみます。
通常のボタンとは別に、画面幅いっぱいに広がるボタン(.button–lg)と通常より小さめのボタン(.button–sm)を用意します。

<button class="button">button</button>
<button class="button--lg">button lg</button>
<button class="button--sm">button sm</button>

それぞれのボタンにスタイルを設定します。
必要な部分のみ抜粋しているので、全てのCSSはデモページで確認ください。

.button,
.button--lg,
.button--sm {
	width: 250px;
}
.button--lg {
	width: 100%;
}
.button--sm {
	width: 150px;
}

この場合の結果ですが、.buttonと.button–smはダブルタップで拡大されますが、.button-lgはダブルタップで拡大されませんでした。
また、.buttonより.button–smをダブルタップした時の方が大きく拡大されるようでした。
buttonタグでのデモページ

buttonタグの場合の対策ですが、touch-actionプロパティを追加するといいようです。

.button,
.button--lg,
.button--sm {
	touch-action: manipulation;
}

これでそれぞれのボタンをダブルタップしても、拡大されなくなりました。
buttonタグでのデモページ2

前述の例をbuttonタグをdivタグに変えた場合も試してみます。
まずはtouch-actionの設定前です。

<div class="button">button</div>
<div class="button--lg">button lg</div>
<div class="button--sm">button sm</div>

この場合も先ほどと同じく、.button–lg以外へのダブルタップは拡大されます。
buttonタグをdivタグに置き換えた場合のデモページ

次にtouch-actionプロパティを追加した場合ですが、buttonタグの時とは違い、.buttonと.button–smはダブルタップで拡大されるままのようです。
buttonタグをdivタグに置き換えた場合のデモページ2

buttonタグでない場合はtouch-actionを設定しても拡大されてしまうようなので、buttonタグの中に別要素が入る場合はどうなるかを試してみます。

<button class="button">
	<span class="button__inner">button</span>
</button>
<button class="button--lg">
	<span class="button__inner">button lg</span>
</button>
<button class="button--sm">
	<span class="button__inner">button sm</span>
</button>

まずはtouch-actionの設定前ですが、今までと同様に.button–lg以外へのダブルタップは拡大されます。
buttonタグに子要素を含めた場合のデモページ

次にtouch-actionプロパティを追加した場合ですが、ダブルタップで拡大されなくなっていました。
buttonタグに子要素を含めた場合のデモページ2

通常の要素の場合

buttonタグ以外の場合はtouch-actionを設定しても拡大してしまうようなので、buttonタグ以外の通常の要素の場合を試してみます。
試してみた限りではダブルタップで拡大される要素と拡大されない要素があるようだったのですが、要素の幅が指定されていたりmarginを左右に設定していたりなどして、ブラウザ幅よりも要素の幅が一定以上狭い場合に拡大対象となるようでした。
ただあくまで試してみた範囲での推測で、具体的な仕様やドキュメント類を確認したわけではないので、実際には他の要因が関連する可能性はあります。

幅100%の要素と固定幅の要素、左右にmarginをとっている要素をそれぞれ用意します。

<div class="box">テキストテキスト<br>
テキストテキスト</div>
<br><br><br><br>
<div class="box--wd">幅固定テキストテキスト<br>
テキストテキスト</div>
<br><br><br><br>
<div class="box--mg">横マージン付きテキストテキスト<br>
テキストテキスト</div>

.box--wd {
	width: 150px;
}
.box--mg {
	margin: 0 10%;
}

このデモの場合、1つ目はブラウザ幅いっぱいに要素も広がっているのでダブルタップで拡大されませんでしたが、2つ目と3つ目は拡大されました。
通常の要素のデモページ

次に拡大しないようにする方法を検討してみます。
まずはボタンの時と同様に、touch-actionを設定する方法です。

.box,
.box--wd,
.box--mg {
	touch-action: manipulation;
}

この場合は特に効いていないようで、ダブルタップで拡大されるままでした。
通常の要素のデモページ2

次にviewportで拡大不可にする方法です。

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

この場合もダブルタップで拡大されるままでした。
通常の要素のデモページ3
user-scalable=noに関してはiOS10から効かなくなっているようです。

次にpointer-events: none;を指定する方法です。

.box,
.box--wd,
.box--mg {
	pointer-events: none;
}

この場合はダブルタップで拡大しないようにできました。
ただしこの方法の場合はクリックなどのイベントも無効化することになるので、要素によっては使用できない場合もあります。
通常の要素のデモページ4

最後にJavaScriptで制御する方法です。

document.addEventListener('dblclick', function(e){
	e.preventDefault();
});

この場合もダブルタップで拡大しないようにできました。
通常の要素のデモページ5