iOSでWebブラウザを表示したとき、ダブルクリックで画面がズームしないようにする方法

はじめに

iOSのWebブラウザ上でダブルタップをすると勝手にズームする現象を発見。
解消する方法を調べました。

試したこと

1. フォントサイズを「16px」以上にする
2. トリガーからダブルクリックをクリックに変換する
3. イベントハンドラのtouchendを利用し、ダブルクリックを検知したらクリックに変換する
   →「3」の方法で解決しました！

1. フォントサイズを 「16px」 以上にする

画面がズームする理由を調べてみたところ、iOSではWebブラウザを表示した際、input要素に指定しているフォントサイズが16pxを下回ると、フォーカス時にズームされるという仕様があることがわかりました。
https://uxcellence.com/2014/fix-ios-input-zoom

テキストボックスに文字を入力するときズームになるケースがこれに該当しますね。
iOSの仕様どおり、フォントサイズを16px以上に設定するとズームしなくなるケースが多いようです。

なお、上記の仕様があることから、以下のように強制的にズームを拒否してはいけません。

NG例

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

今回はダブルクリックによるズームを止めたいので、別の方法を調べました。

2. トリガーからダブルクリックをクリックに変換する

この実装で、ズームはしなくなります。
・・・・が、非活性のボタンでも問答無用で強制クリックする効力を持っているので大変危険です。

document.addEventListener('touchend', function (event) {
  event.preventDefault();
  $(event.target).trigger('click');
}, false);

3. イベントハンドラのtouchendを利用し、ダブルクリックを検知したらクリックに変換する

最終的には、ダブルクリックによる検知を自作して解決しました ^ ^

var isClicked = false;

document.addEventListener('touchend', function (event) {
  if (isClicked) {
    // double click
    if (event.cancelable) {
      event.preventDefault();
    }
    isClicked = false;
  } else {
    // single click
    isClicked = true;
    setTimeout( function() {
      isClicked = false;
    }, 350);
  }
}, false);

• イベントハンドラのdblclickでダブルクリックを検知することができますが、ダブルクリックの途中でテキストが選択されてしまうことがあるため、今回はtouchendからダブルクリックを検知するように実装しています。
• mousedownの方がイベントの発火が遅いため良いかと思い実装しましたが、挙動が安定しませんでした。

if (event.cancelable) {
  event.preventDefault();
}

• 上記のように、イベントがキャンセル可能かを判定してからイベントを中止しないと以下のエラーが出力されるので注意が必要です。

[Intervention]Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

参考
http://js.studio-kingdom.com/javascript/event/cancelable
https://lab.syncer.jp/Web/JavaScript/Snippet/14/
https://qiita.com/ikemai/items/d0f9ada6c8d75cceab67