Привет, разработчики! Столкнулся с проблемой при создании мобильной веб-страницы. Мне нужно определить, когда пользователь выполняет жест масштабирования (зум) на экране. То есть, когда он разводит или сводит два пальца. Посмотрел jQuery Mobile, но там не нашел ничего подходящего.
Подскажите, пожалуйста, как можно привязать JavaScript-функцию к событию масштабирования на мобильном устройстве? Может, есть какие-то специальные библиотеки или нативные решения?
Буду очень благодарен за любую помощь или идеи!
Для отслеживания жеста масштабирования можно использовать событие ‘gesturechange’. Вот пример:
window.addEventListener(‘gesturechange’, function(e) {
if (e.scale > 1) {
console.log(‘Увеличение’);
} else {
console.log(‘Уменьшение’);
}
});
Но учти, что это работает не на всех устройствах. Альтернативный вариант - отслеживать события ‘touchstart’, ‘touchmove’ и ‘touchend’, вычисляя расстояние между точками касания. Это сложнее, зато более универсально.
Слушай, а ты пробовал использовать CSS свойство touch-action? Оно позволяет контролировать поведение браузера при тач-событиях. Например, если задать touch-action: none; для элемента, то все жесты масштабирования на нем будут отключены. А потом можно отслеживать изменения через JavaScript, используя event.touches. Это не самое простое решение, но работает практически везде. Я как-то делал так для галереи изображений, и все отлично работало даже на старых девайсах. Правда, пришлось немного повозиться с настройкой.
Попробуй библиотеку Hammer.js, она как раз для работы с тач-событиями. Там есть готовое событие pinch для масштабирования. Примерно так:
var hammertime = new Hammer(element);
hammertime.on(‘pinch’, function(ev) {
console.log(ev.scale);
});
Работает на большинстве устройств, плюс там куча других жестов. Правда, библиотека немного тяжеловата, но для твоей задачи самое то.