Отключить масштабирование в webkit (или электрон)

Ответ 1

ОБНОВЛЕНИЕ 2:

Используйте webFrame.setZoomLevelLimits (v0.31.1 +) в процессе визуализации (Различия между Основной процесс и процесс рендеринга). Поскольку интеллектуальный зум на mac по-прежнему работает с document.addEventListener.

Пример require('electron').webFrame.setZoomLevelLimits(1, 1)

UPDATE:

deltaY свойство для масштабирования зума имеет значение float, но нормальное значение возврата строки int. Теперь решение не имеет проблем с клавишей Ctrl.

Демо 2.

document.addEventListener('mousewheel', function(e) {
  if(e.deltaY % 1 !== 0) {
    e.preventDefault();
  }
});

Использование Chromium monitorEvents(document) Я обнаружил, что отвечает за это событие mousewheel. Я не знаю, почему mousewheel срабатывает с увеличением зума. На следующем шаге найдите разницу между обычным прокруткой и масштабированием.

Пинч-зум имеет атрибут e.ctrlKey = true, а обычное событие прокрутки имеет e.ctrlKey = false. Но если вы удерживаете клавишу ctrl и прокручиваете страницу, e.ctrlKey равно true.

Я не мог найти лучшего решения.: (

Демо

document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});

Ответ 2

Кажется очень трудным для настольного браузера предотвращать масштабирование зума.

Вот некоторые идеи!

1) Используя некоторые жесты javascript, такие как hammer.js, обнаруживайте событие Pinch и пытайтесь его предотвратить, используя e.preventDefault

ИЛИ

2) Создайте все, используя "%" в css, или используйте более новые единицы, такие как "vm" и т.д. (если возможно). Таким образом, даже страница будет увеличена, но контент останется неизменным для любого уровня масштабирования.

Все самое лучшее!

Ответ 3

Есть ли причина, по которой вы не можете использовать:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Поместите это в заголовок и удерживайте устройства от масштабирования.

Ответ 4

должен работать. Попробуйте использовать минимальный масштаб = 1,0

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

И если он также не работает, добавьте минимальный и максимальный масштаб

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

P.S.: Он отключит масштабирование только на мобильных телефонах.

Ответ 5

Я так долго и долго искал для простого решения этой проблемы, но не смог... но позже я обнаружил плагин с именем fullpage.js, который смог предотвратить масштабирование зума, сохраняя при этом сенсорные жесты. В процессе устранения js/css я обнаружил очень простое решение:

touch-action: none;

Добавление этого элемента моей полной страницы успешно предотвратило масштабирование, но позволило мне масштабировать объекты fabricjs с ущемлением. Ура!