📱 Быстро жмёте кнопку на телефоне, а страница вдруг зумится
На одном веб-радио при быстром переключении станций с мобильного браузер то приближал, то отдалял страницу. Viewport meta при этом был настроен правильно.
Виноват жест двойного тапа. Safari на iOS принимает два быстрых нажатия за просьбу увеличить элемент, в данном случае саму кнопку.
Лечится одной строкой CSS:
.button {
touch-action: manipulation;
}
Прокрутка и масштабирование двумя пальцами продолжают работать, отключается только зум по двойному тапу. По словам MDN, браузеру заодно не нужно задерживать событие click в ожидании второго тапа.
Есть соблазн вместо этого дописать в viewport maximum-scale=1.0, user-scalable=no. Не надо: так зум пропадает целиком, а это нарушение WCAG.
В оригинале два демо на CodePen, с кнопками без этого свойства и с ним: потыкайте их с телефона и почувствуйте разницу.
👉 @seniorFront
На одном веб-радио при быстром переключении станций с мобильного браузер то приближал, то отдалял страницу. Viewport meta при этом был настроен правильно.
Виноват жест двойного тапа. Safari на iOS принимает два быстрых нажатия за просьбу увеличить элемент, в данном случае саму кнопку.
Лечится одной строкой CSS:
.button {
touch-action: manipulation;
}
Прокрутка и масштабирование двумя пальцами продолжают работать, отключается только зум по двойному тапу. По словам MDN, браузеру заодно не нужно задерживать событие click в ожидании второго тапа.
Есть соблазн вместо этого дописать в viewport maximum-scale=1.0, user-scalable=no. Не надо: так зум пропадает целиком, а это нарушение WCAG.
В оригинале два демо на CodePen, с кнопками без этого свойства и с ним: потыкайте их с телефона и почувствуйте разницу.
👉 @seniorFront