タッチパネルのピンチズームを無効化する #CSS

surface用にwebアプリを作っていた際、chromeブラウザだけ制御できなかった時にはまったのでメモ。

色々挑戦しました。

こいつも...

document.addEventListener('touchstart', function(event){
    event.preventDefault();
});

こいつも...

html

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

こいつも...

chrome://flags/#touch-events

ダメでした😭

ただしchrome以外のブラウザだと上から2つのどちらかで制御できると思います。

chromeだけなかなか制御できないので
「ユーザビリティ的によくないし、ピンチできるようにした方が親切ですよ！！ディレクターさん✨」　　
という言い訳が頭に過ぎりました。（ダメですね

でもとても簡単な方法がありました。

css

html, css{
  touch-action:none;
}

たったこれだけで制御できました。

天下のStack Overflow様様ですね🙏✨

ただし、touch-actionには罠も潜んでいるようなので気をつけたいですね。

参考