Отключение автоматического зума в 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 проблем, но отслеживание фокуса – не одна из них */
}
Сохраняем формы в модальных окнах и предотвращаем скачки интерфейса при активации поля ввода.
Полезные материалы
- Viewport meta tag – HTML: HyperText Markup Language | MDN — обзор возможности регулирования масштабирования на мобильных устройствах с помощью мета-тега viewport.
- Supported Meta Tags — объяснение мета-тегов Safari.
- ios10 – disable viewport zooming iOS 10+ safari? – Stack Overflow — активные обсуждения и предложения решений от сообщества.
- Designing Websites for iPhone X | WebKit — принципы дизайна для iOS.
- touch-action – CSS: Cascading Style Sheets | MDN — взаимодействие с сенсорными экранами в веб-страницах.
- Pointer Events — понимание возможностей и событий сенсорных экранов.
- HTML Standard — стандарты доступности для веб-приложений.