В течение многих лет мобильные браузеры применяли задержку в 300–350 мс между touchend и click , ожидая, будет ли это двойное касание или нет, поскольку двойное касание было жестом для увеличения текста.
Начиная с первого выпуска Chrome для Android, эта задержка была устранена, если также было отключено масштабирование. Тем не менее, масштабирование — важная функция специальных возможностей. Начиная с Chrome 32 (еще в 2014 году) эта задержка исчезла для сайтов , оптимизированных для мобильных устройств , без удаления масштабирования ! Вскоре после этого Firefox и IE/Edge сделали то же самое, а в марте 2016 года аналогичное исправление появилось в iOS 9.3.
Разница в производительности огромна!
Наличие пользовательского интерфейса, который реагирует мгновенно, означает, что пользователь может быстро и уверенно нажимать каждую кнопку, а не останавливаться и ждать ответа. Узнайте больше о влиянии времени реакции человека на производительность Интернета в нашем введении в RAIL .
Чтобы убрать задержку касания в 300–350 мс, все, что вам нужно, это следующее в <head> вашей страницы:
<meta name="viewport" content="width=device-width">
При этом ширина области просмотра устанавливается такой же, как на устройстве, и обычно является лучшим решением для сайтов, оптимизированных для мобильных устройств. С помощью этого тега браузеры предполагают, что вы сделали текст читабельным на мобильных устройствах, а функция двойного касания для масштабирования отсутствует в пользу более быстрого щелчка.
Если по какой-то причине вы не можете внести это изменение, вы можете использовать touch-action: manipulation для достижения того же эффекта либо на всей странице, либо на отдельных элементах:
html {
touch-action: manipulation;
}
Этот метод не поддерживается в Safari , поэтому тег области просмотра гораздо предпочтительнее.
Является ли потеря двойного касания для масштабирования проблемой доступности?
Нет. Масштабирование щипком продолжает работать, а функции ОС предназначены для пользователей, которым этот жест кажется сложным. На Android об этом позаботятся жесты увеличения . Подобные инструменты работают даже вне браузера.
А как насчет старых браузеров?
FastClick от FT Labs использует события касания для более быстрого запуска кликов и удаляет жест двойного касания. Он учитывает количество перемещений вашего пальца между touchstart и touchend , чтобы различать прокрутку и касание.
Добавление прослушивателя touchstart ко всему влияет на производительность, поскольку взаимодействия более низкого уровня, такие как прокрутка, задерживаются из-за вызова прослушивателя, чтобы проверить, сработал ли он event.preventDefault() . К счастью, FastClick не будет устанавливать прослушиватели в тех случаях, когда браузер уже устранил задержку в 300 мс, так что вы получите лучшее от обоих!