Как предотвратить использование по умолчанию родного браузера для масштабирования?

Question

Этот вопрос был задан в нескольких вариантах, но ни один не удовлетворяет.

Собственный браузер (например, Google Chrome для Ma c) поддерживает жест «щепотка для увеличения» по умолчанию, который позволяет масштабировать весь видовой экран. Как отключить (отреагировать) это поведение по умолчанию, чтобы я мог написать собственную логику сжатия / масштабирования c? Карты Google https://maps.google.com/, по-видимому, достигли этого, поскольку сжатие на карте будет только масштабировать область карты, оставляя остальную часть пользовательского интерфейса без изменений, в то время как нажатие на левой боковой панели показывает поведение по умолчанию.

Я пробовал несколько подходов, таких как HTML "viewport" meta tag, CSS touch-action: none; и JavaScript document.addEventListener('touchmove', e => { e.preventDefault() }), но все они, похоже, работают только на мобильных устройствах.

Answer 1

Я случайно нашел решение, которое работает на Chrome. Вы в основном должны preventDefault "wheel" событие. ctrlKey будет true, если это событие-пинч, а не свиток.

element.addEventListener('wheel', event => {
   const { ctrlKey } = event
   if (ctrlKey) {
      event.preventDefault;
      return
   }
}, { passive: false })

Я думаю, именно так это и делают Google Карты.

(большинство) Кросс-браузерное решение, вероятно, представляет собой комбинацию из упомянутых методов: user-scalable=no в метатеге "viewport" для браузеров, которые его поддерживают, и этот для нативного Chrome.

Answer 2

Используйте этот метатег:

<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />