Отключение автоматического зума в Safari на iPhone

Быстрый ответ

Для предотвращения автоматического масштабирования в браузере Safari на iPhone вам понадобится мета-тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Такая настройка фиксирует уровень масштабирования на отметке 1 и деактивирует масштабирование, инициированное пользователем, что препятствует автоматическому масштабированию полей ввода. Однако, установка user-scalable=no может усложнить взаимодействие пользователя со страницей, поэтому важно найти баланс между стабильностью и удобством использования.

Визуализация

Автоматическое масштабирование можно воспринимать как попытку Safari увеличить размер мелкого шрифта. Если нам требуется стабильный интерфейс, эту функцию можно отключить.

📱 Пользователь нажимает на поле ввода
|
| (Safari автоматически изменяет масштаб) 🔍-->📝
|
🚫 Наша цель – предотвратить это автомасштабирование!

input[type="text"] {
  font-size: 16px; /* Укрощаем Safari! */
}

Задание размера шрифта в 16px останавливает автоматическое масштабирование в Safari.

Теперь интерфейс остается стабильным, когда пользователь переходит в текстовое поле.

Подробное рассмотрение способов предотвращения и улучшения

Магическая сила минимального размера шрифта

Для предотвращения автоматического масштабирования в Safari устанавливаем минимальный размер шрифта 16px для элементов input, select и textarea.

input, select, textarea {
  font-size: 16px; /* Настраиваем Safari к Хэллоуину: невидимка */
}

Подробнее об этом расскажет наш спикер на видео

Применение медиа-запросов

Используем медиа-запросы @media в сочетании с функцией -webkit-min-device-pixel-ratio для реализации стилей, специфических для Safari:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input, select, textarea {
    font-size: 16px; /* Обещание Safari: без масштабирования! */
  }
}

Единый размер шрифта, контролируемый из одной точки

Применение font-size: inherit к элементам формы позволяет централизованно управлять из одного места, которым обычно является body:

body {
  font-size: 16px;
}

input, select, textarea {
  font-size: inherit; /* Принимаем ваш UIManager receipt... это, наследуем font-size */
}

Преимущества ориентированных на мобильные устройства дизайна

Следуем подходу, ориентированному на мобильные устройства. Он предполагает дизайн, в котором масштабирование не требуется, и элементы легко доступны.

Основной принцип успешности – последовательность

Убеждаемся, что CSS-правила одинаково применяются как к фокусирующимся, так и нон-фокусирующимся состояниям, чтобы обеспечить оптимальную визуальную последовательность.

input:active, input:focus {
  font-size: inherit; /* Все ждут моего контроля! */
}

Возможности доступности без масштабирования

Сохранение доступности страницы очень важно. Дайте пользователям возможность масштабирования, используя maximum-scale=1.0 вместо user-scalable=no.

Обходные пути особенностей Safari

Используем известные обходные пути для решения проблем, связанных с особенностями мобильного Safari:

select:focus {
  background: #eee; /* У меня 99 проблем, но отслеживание фокуса – не одна из них */
}

Сохраняем формы в модальных окнах и предотвращаем скачки интерфейса при активации поля ввода.

Полезные материалы

1. Viewport meta tag – HTML: HyperText Markup Language | MDN — обзор возможности регулирования масштабирования на мобильных устройствах с помощью мета-тега viewport.
2. Supported Meta Tags — объяснение мета-тегов Safari.
3. ios10 – disable viewport zooming iOS 10+ safari? – Stack Overflow — активные обсуждения и предложения решений от сообщества.
4. Designing Websites for iPhone X | WebKit — принципы дизайна для iOS.
5. touch-action – CSS: Cascading Style Sheets | MDN — взаимодействие с сенсорными экранами в веб-страницах.
6. Pointer Events — понимание возможностей и событий сенсорных экранов.
7. HTML Standard — стандарты доступности для веб-приложений.