Javascript - Как остановить пинч-зум, атаки с несколькими касаниями?

Текущая стабильная версия Google Chrome перестала вручную блокировать масштабирование, что было возможно в более старых версиях со следующими настройками:

chrome://flags/#enable-pinch

Я получаю атаки в моем киоске от некоторого случайного увеличения масштаба/мультитач.

Как сказать JavaScript, чтобы отключить масштабирование/мультитач? (чтобы защитить киоск)

Я попытался следовать, но ничто не мешает киоску игнорировать атаки масштабного увеличения.

$(document).ready(function() {

  $(document).bind('contextmenu', function()  {
    console.log('NO NO NO. STOP!!!');
    window.location.reload();
    return false;
  });

  $(document).mousedown( function() {
    console.log('NO NO NO. STOP!!!');
    return false; 
  });

});

РЕДАКТИРОВАТЬ:

chrome://flags/#enable-pinch - больше не работает в Google Chrome. Google не должен был его удалять, а сообщество должно было протестовать против его удаления.

Ответ 1

Вы должны быть в состоянии запретить пользователям изменять масштаб, добавив этот метатег к вашему <head>:

<meta name="viewport" content="width=device-width, user-scalable=no">

Моя версия Google Chrome Version 51.0.2704.84 (64-bit), соблюдает этот параметр, когда я тестирую его, используя его сенсорную эмуляцию в инструментах разработчика.

Например:

Веб-сайт, на котором масштабируется при нажатии: Новости хакеров

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Веб-сайт, на котором не масштабируется при нажатии: Новости дизайнера

<meta name="viewport" content="width=device-width, user-scalable=no">

Я хотел бы прокомментировать, что позволяет пользователям увеличивать и уменьшать масштаб не следует рассматривать как "атаку". Масштабирование очень важно для людей с плохим зрением (или с ослабленным зрением, я не уверен, что будет правильным и вежливым английским термином).

Если вы отключите поведение естественного масштабирования, вы должны нести полную ответственность за читаемость вашей веб-страницы.

Ответ 2

Я не знаю, считается ли это полным ответом, но у меня нет комментариев для комментариев. Один из вариантов - установить обработчик для сенсорных событий window.addEventListener("touchstart", touchHandler, false);, а затем напишите функцию touchHandler

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()
    }
}

Вот еще информация о разработке с сенсорными событиями https://mobiforge.com/design-development/html5-mobile-web-touch-events Вам нужно будет установить обработчик для другого события касания, чтобы предотвратить изменение масштаба по умолчанию в зависимости от браузера. Список можно найти здесь: http://www.quirksmode.org/mobile/default.html

Я не знаю, будет ли это работать для вас, но, возможно, стоит попробовать.

Ответ 3

Предполагая, что вы запускаете киоск на ПК, нет никакого способа сделать это программно из веб-приложения.

Вы должны отключить поддержку жестов с несколькими касаниями либо в настройках драйвера сенсорного устройства, либо в настройках операционной системы. Вот хороший пример - сенсорный экран Windows 7 - отключение жестов с несколькими касаниями не работает

Ответ 4

Привет вот мое предложение. Попытайтесь понять, есть ли несколько входов и сделать его средним для внешнего пальца, то есть на (10,20), а палец два - на (20,10), он усреднен до (15,15). Простите, я мог только предложить идеи, а не код спасибо

Ответ 5

Вот как вы можете предотвратить масштабирование в Chrome:

document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});

Может быть, кроме какого-то элемента

document.getElementById('someelement').addEventListener('touchstart', function(e){e.stopPropagation()}, false);

Ответ 6

Ответ фанки работает для меня (Opera в режиме киоска), за исключением того, что я использую touchmove вместо touchstart. И чтобы сохранить работу ползунков, добавьте в них определенного слушателя, как указывает Фанки.