Тап

Палец — гораздо менее точный инструмент, чем курсор. Он закрывает собой цель, у него нет состояния «навёл, но не нажал», а площадь касания измеряется миллиметрами, а не пикселями. Поэтому интерфейс, нарисованный под мышь, на телефоне часто оказывается неудобным: мелкие ссылки, меню, которое раскрывается только при наведении, подсказки во всплывающих окнах.

Для браузера тап превращается в цепочку событий: сначала touchstart и touchend (или pointerdown и pointerup с pointerType, равным "touch"), затем — для совместимости со старыми сайтами — привычный click. Благодаря этому кнопки, рассчитанные на клик, работают и на сенсорных экранах без отдельного кода.

Что учесть при вёрстке

• Размер цели. Кнопки и ссылки делают не меньше 44–48 пикселей по меньшей стороне — так советуют руководства Apple и Google. Требования доступности WCAG 2.2 задают нижнюю границу в 24×24 CSS-пикселя.
• Расстояние между целями. Две ссылки вплотную друг к другу — частая причина промахов в меню и подвале.
• Никакой логики только на наведении. Подменю, которое открывается по :hover, на телефоне либо не откроется, либо откроется вместе с переходом по ссылке.
• Обратная связь на нажатие. Состояние :active показывает, что касание засчитано.

Пример: стили под сенсорный ввод

.btn { touch-action: manipulation; }

@media (hover: hover) {
  .btn:hover { background: #e8eef7; }
}
@media (pointer: coarse) {
  .btn { min-height: 48px; padding: 12px 20px; }
}

touch-action: manipulation отключает масштабирование двойным тапом на элементе, так что браузеру не нужно ждать второго касания. Эффект наведения подключается только на устройствах, где наведение действительно есть, — иначе после тапа подсветка «залипает». Медиафункция pointer: coarse срабатывает, когда основной способ ввода неточный, то есть палец.

Тап и другие жесты

Тап — самый простой жест сенсорного интерфейса. Двойной тап в браузере обычно увеличивает страницу, долгое нажатие открывает контекстное меню, а сведение двух пальцев — это уже жест масштабирования. Раньше мобильные браузеры задерживали обработку тапа примерно на 300 мс, ожидая возможного второго касания; в современных браузерах этой задержки нет, если в странице задан meta viewport с width=device-width.