Отключить Chrome pinch zoom для использования в киоске

мы используем Chrome в режиме киоска и случайно пользователи вызывают приложение для увеличения с недавним добавлением поддержки pinch zoom. Затем они думают, что сломали его и просто уходят, оставляя приложение (а затем 55-дюймовый сенсорный экран) в сломанном состоянии.

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

Я сделал мета-теги, они не работают. Честно говоря, я хотел бы отключить масштабирование chrome, но я не могу найти способ сделать это.

Как остановить масштабирование браузера?

30
google-chrome kiosk pinch zoom

6 ответов

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

мы нашли эти возможные (но не долгосрочных) решений:

1. Отключите функции pinch / swipe при использовании режима киоска

Если эти параметры командной строки остаются в Chrome, вы можете следующий:

chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0
  • --disable-pinch - отключает функцию pinch-to-zoom
  • --overscroll-история-навигация=0 - отключает свайп-навигацией

2. Отключить pinch zoom с помощью флагов Chrome chrome: / / flags / #enable-pinch

перейдите к URL chrome: / / flags / #enable-pinch в вашем браузере и отключите эту функцию.

Пинч зум функция в настоящее время экспериментальная, но включена по умолчанию, что, вероятно,означает, что она будет включена в будущих версиях. Если вы находитесь в режиме киоска (и контролируете аппаратное/программное обеспечение), вы, вероятно, можете переключить этот параметр при установке, а затем предотвратить обновление Chrome.

уже есть билет дорожной карты для удаления этого параметра в Выпуск Хрома 304869.

тот факт, что браузер реагирует, прежде чем javascript может предотвратить это наверняка ошибка и была зарегистрирована в хром баг трекер. Надеюсь, он будет исправлен до того, как функция будет постоянно включена или скрещены пальцы, они оставят его в качестве настройки.

3. Отключите все касания, белый список для элементов и событий, соответствующих вашему приложению

во всех тестах, которые мы провели, добавление preventDefault () в документ останавливает масштабирование (и все другие события swipe/touch) в Chrome:

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

Если вы прикрепляете свою сенсорную функциональность выше в DOM, она активируется, прежде чем пузыри к вызову preventDefault() документа. В Chrome Также важно включить параметр eventListenerOptions, потому что с Chrome 51 a прослушиватель событий уровня документа установлен в {passive: true} по умолчанию.

Это отключает обычные функции браузера, такие как салфетки для прокрутки, хотя вам, вероятно, придется реализовать их самостоятельно. Если это полноэкранный режим, без прокрутки киоск app, возможно, эти функции не будут важны.

57

так же, как любой, кто натыкается на эту страницу, знает, что флаг в Chrome, чтобы отключить "pinch для увеличения" теперь:

версия Google Chrome / Chromium / Canary выше 50:

chrome://flags/#touch-events

Google Chrome/Chromium / Canary версии менее 50 или старых версий:

chrome://flags/#enable-pinch.

6

Я имею дело с той же проблемой. Я думаю, что могу справиться с этим достаточно хорошо со следующим подходом

  • определите ширину пикселя css элемента html:document.documentElement.clientWidth
  • сравните это измерение с известной шириной пикселей экрана киоска
  • если html-элемент шире, в CSS-пикселях, чем экран, в физических пикселях, это означает, что он масштабируется
  • если элемент html масштабируется, примените масштабирование к элементу body для компенсировать. Формула тела.стиль.zoom = htmlElementClientWidth / screenPhysicalPixelWidth

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

больше на пикселях экрана против пикселов css, и обсуждение как элемент html расширяет для того чтобы заполнить доступный космос на quirksmode.org.

2

еще одно решение, которое в настоящее время работает в Chrome (54) добавить прослушиватель событий для 'touchstart' событие и вызов preventDefault() на основе длины targetTouches или touches на мероприятии.

такое решение предотвращает щепотка (двумя пальцами жест на то пошло), но по-прежнему обеспечивает гибкость в том, как вы хотите реагировать на события. Это хорошее решение, потому что оно не требует, чтобы вы полностью отключали события касания (как требуется, если вы хотите отключить pinch с помощью флаги chrome, так как chrome://flags/#enable-pinch больше не существует).

window.addEventListener('touchstart', function(e) {
  if (e.targetTouches.length === 2) {
    e.preventDefault();
  }
}, false);
Some text that you can't pinch zoom on Chrome (tested in 54)
1

начиная с версии 51.0.2704.84 m,chrome:/ / флаги / #touch-события отключает все сенсорные события не только функцию pinch. К ВАШЕМУ СВЕДЕНИЮ. Надеюсь, Google вернет эту функциональность в будущем выпуске.

0
-1