en / ru

Проблемы и решения в мобильных браузерах

Приближение при активации текстового поля

Когда мы передаем фокус (делаем клик) текстовому полю, появляется виртуальная клавиатура. В некоторых случаях также наблюдается zoom-in (приближение) с текстовому полю. Это не баг - это фича, для удобства пользователя.

Решение достаточно простое - изменить font-size для текстового поля, чтобы устройство не посчитало необходимым приближать его.
В найденных решениях рекомендовалось значение 16px. Но мне помог только 17px. Но и это решение оказалось неокончательным - пришлось изменить на 20px (видимо, какие-то изменения в обновлениях iOS сказались), благо дизайн позволял.


Не исчезает клавиатура, хотя инпута больше нет

Проблема наблюдалась в iOS Safari, когда мы вводим текст в поле, которое находится в iframe, а iframe этот потом закрывается. Клавиатура почему-то не знает о том, что текстовое поле уже исчезло.

Тестовая страница

Решается фейковым focus/blur на любой другой текстовый инпут на странице. Например, можно добавить и удалить скрытый input:


Отмена "pull to refresh" в мобильных браузерах

Наверняка вы уже встречали такую полезную фичу, когда дергаешь окно браузера/приложения вниз и страница/приложение обновляет данные. Например, так работает мобильный Twitter.

В мобильном Google Chrome с версии 41 такое поведение включено по-умолчанию и работает для любой веб-страницы.

Отключается такое самовольство просто: в touchmove прописываем e.preventDefault();