TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.18K subscribers
Post #170 779
Зум полей ввода на iOS

В Safari на iOS иногда встречается ситуация, когда при фокусе в поле ввода страница зумится. Тестировщики могут даже завести соответствующий баг. Не стоит сразу бросаться камнями в Safari, как это обычно бывает. В этом месте они поступают разумно.

“Баг” происходит, когда у текстовых полей ввода значение font-size меньше 16px. Это пороговое значение для комфортного чтения. Поэтому при фокусе в поле страница увеличивается для удобства чтения вводимого значения, чтобы компенсировать font-size ниже порогового значения. Такое поведение распространяется на все браузеры под iOS, так как на данный момент там доступен только один браузерный движок — Webkit. С новыми европейскими регуляциями возможно появление альтернативных движков.

Google тоже учитывает слишком маленький размер шрифта, но иначе. В Lighthouse есть проверка в рамках аудита SEO. Она завершается с ошибкой, если у 40% текста на странице font-size меньше 12px. Ранее похожая проверка была в Google Search Console, в разделе Mobile-friendly. Но с 1 декабря 2023 года поддержка этого раздела прекращена в пользу Lighthouse.

Чтобы избежать зума страницы на iOS, достаточно установить для текстовых полей значение font-size больше или равное 16px. И хорошо, чтобы это было минимальным значением в целом, а не только для полей ввода. Не нужно следовать советам, которые предлагают "исправить проблему" путём добавления значение maximum-scale=1 в мета-тег viewport. Такое "исправление" не проходит один из тестов критерия WCAG 1.4.4 Resize Text. Кроме того, браузеры могут игнорировать значения мета-тега viewport, если сочтут нужным.
  • 👍 14
  • 🔥 6
  • 🌚 2
More from @alexnozer_dev
  1. Sep 23, 2026Images Preview На некоторых сайтах, где надо показывать изображения в высоком качестве, дл…
  2. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  3. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  4. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
  5. Sep 9, 2026Persistent Widgets Многие сайты не должны быть SPA. Но иногда эта архитектура продиктована…
  6. Sep 7, 2026Processing Instructions и маркеры В DOM всё представлено в виде узлов (Node) разных типов.…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →