Отключение функции зума двойным тапом на устройствах

Быстрый ответ

Для отключения функции масштабирования при двойном касании используйте CSS-стиль touch-action: manipulation;. Он блокирует масштабирование при двойном касании, но не затрагивает возможность масштабирования пальцами:

* {
    touch-action: manipulation; /* масштабирование при двойном тапе не происходит */
}

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

А вот как полностью запретить масштабирование на touch-устройствах — в тег viewport добавьте атрибут user-scalable=no:

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

Разделяем элементы при помощи CSS-классов

Вы можете настроить поведение каждого конкретного элемента, регулируя возможность масштабирования. Для отключения масштабирования укажите класс disable-dbl-tap-zoom для нужных элементов:

.disable-dbl-tap-zoom {
    touch-action: manipulation; /* масштабирование отключено */
}

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

Применяем jQuery для блокировки масштабирования

Если ваш элемент интерактивен и вы хотите запретить масштабирование при двойном тапе, примените следующий код на jQuery:

$('.disable-dbl-tap-zoom').on('touchend', function(e) {
    var $this = $(this);
    if ($this.data('lastTouch') && e.timeStamp – $this.data('lastTouch') < 500) {
        e.preventDefault(); /* предотвращаем двойной тап */
    }
    $this.data('lastTouch', e.timeStamp);
});

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

Обеспечиваем комфортное использование сайта на всех устройствах

При создании веб-сайта важно обеспечить его корректное функционирование на всех типах устройств. Уделяйте особое внимание совместимости браузеров и качеству пользовательского опыта. Не забывайте проводить тестирование на различных устройствах и выявлять проблемы визуализации.

Игра Zoom-out и пользовательский опыт

Помните, что блокировка функции масштабирования может сказаться на удобстве использования сайта. Функцией масштабирования не стоит злоупотреблять и лучше включать её там, где это улучшает удобство навигации по сайту. Избегайте ситуаций, когда случайное масштабирование может портить впечатление от взаимодействия с интерфейсом.

Визуализация

Взаимодействие с сенсорным экраном можно представить как танцевальные движения:

Двойное касание для масштабирования: 💃🕺 ↔️ 💃🕺 (танцоры внезапно приближаются)
Отключение: 💃    🕺 (танцоры сохраняют определённое расстояние)

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

Создание уникальных правил для блокировки масштабирования при помощи CSS

Иногда бывает полезно использовать браузерные жесты, добавив к ним немного индивидуальности. Свойство touch-action позволяет определить, какие жесты будут активны, а какие отключены:

.card {
    touch-action: pan-x pan-y; /* разрешено перемещение, но блокирован зум */
}

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

Воспоминания: iOS против Android

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

Предупреждение о двойном тапе при помощи пользовательских событий

Если двойное касание упорно вызывает масштабирование, вы можете использовать временную задержку:

let lastTap = 0;
element.addEventListener('touchend', function(event) {
    let currentTime = new Date().getTime();
    let tapLength = currentTime – lastTap;
    if (tapLength < 300 && tapLength > 0) {
        event.preventDefault(); // Предупреждаем о возможном двойном тапе
    }
    lastTap = currentTime;
});

Такой подход поможет предотвратить масштабирование при быстром двойном тапе.

Полезные материалы

1. События касания – Веб-API | MDN — Руководство по работе с сенсорными событиями в API.
2. Отключение масштабирования двойным тапом на сенсорных устройствах – Stack Overflow — Обсуждение проблем масштабирования при двойном касании на StackOverflow.
3. События касания — Рекомендации W3C по управлению сенсорными событиями.
4. 300мс задержка тапа исчезла | Блог | Chrome для разработчиков — Советы от Google по оптимизации обработки сенсорных событий.
5. Трюк с единицами вьюпорта на мобильных устройствах | CSS-Tricks — Статья о работе с единицами вьюпорта на мобильных устройствах от CSS-Tricks.
6. Новая политика для видео на iOS | WebKit — Обсуждение изменений в политике WebKit касательно воспроизведения видео и взаимодействия на iOS.