Определить масштабирование в мобильном браузере

Question

Я хочу знать, есть ли способ обнаружить, что пользователь делает масштабирование пинча.

Я хочу сделать две вещи при увеличении масштаба:

1. пусть div выравнивает левую сторону экрана
2. устанавливает ширину div, равную области просмотраширина

Я обнаружил, что в Android есть touchstart, touchend и touchmove, но они не будут срабатывать во время мультитача.Я хочу завершить вышеуказанную функцию сразу после завершения масштабирования.

Есть ли другие подходы?

---

Я не занимаюсь веб-приложением.Я просто добавляю некоторые функции в мобильную версию.

Answer 1

Браузер Android поддерживает touchstart, touchend & touchmove с JavaScript, но проблема со старыми андроидами заключается в количестве касаний, которые обнаруживают эти события.

Например, этот код будет регистрироватьсообщение на IOS и на новых устройствах Android:

var obj = document.getElementById('elmId');
obj.addEventListener('touchmove', function(event) {
  if (event.targetTouches.length == 2) {
    console.log("exactly 2 fingers gesture inside elmId ");
  }
}, false);

Старые андроиды ничего не сделают, потому что event.targetTouches.length никогда не будет равно 2.

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

Answer 2

Android имеет ScaleGestureDetector . Вот пример . Однако, если вам требуется дополнительная поддержка мультитач, например, ротация, я бы порекомендовал эту библиотеку. Я использовал его лично (для хранения и извлечения матриц преобразования нескольких изображений) и нашел его отличным ресурсом.