Отключение автоматического зума на мобильном веб в HTML/CSS

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

Для запрета масштабирования в мобильных браузерах применяется мета-тег viewport со значением user-scalable=no:

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

Важно: Отключение масштабирования может отрицательно влиять на доступность сайта и удобство его использования. Будьте осторожны при применении этой настройки.

Создание стратегии запрета масштабирования

Мета-тег viewport действует подобно запору двери, не допуская изменение масштаба страницы пользователем.

Мобильный Viewport          📱
С включённым масштабированием:  🔓🔍✅
Без масштабирования:         🔒🔍❌

Выставите в мета-теге определенные значения для исключения возможности изменения масштаба:

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

Это исключит:

📱🔒 = Нежелательные щелчки и масштабирование. Теперь "под запретом"!

Использование CSS для блокировки масштабирования

Дополнительно к мета-тегу viewport можно воспользоваться CSS-свойством touch-action для исключения случайного масштабирования при двойном тапе или прокрутке ползунка.

html, body {
  touch-action: manipulation; /* Устанавливает ограничение на случайное увеличение при двойном касании */
}

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

Обеспечение доступности

Для обеспечения доступности и предотвращения автоматического изменения масштаба при активации элементов ввода задайте минимальный размер шрифта на уровне 16px:

input, textarea, select {
  font-size: 16px; /* Оптимальный размер, при котором масштабирование не требуется */
}

Применять медиа-запросы для адаптации размера текста к различным экранам весьма полезно, и это позволяет избежать необходимости отключения функции масштабирования:

@media (max-width: 600px) {
  body {
    font-size: 18px; /* Размер шрифта можно менять при необходимости */
  }
}

Нахождение баланса

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

Принципы дизайна, ориентированного на мобильные устройства

Руководствуйтесь принципами мобильного дизайна, предусматривающими наибольшее удобство навигации и восприятия контента. Избегать необходимости увеличения контента можно через применение адаптивных макетов и масштабируемых элементов, подгоняемых под различные размеры экранов и их ориентации.

Применение подходящих методик в зависимости от контекста

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

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

1. Viewport meta tag – HTML: HyperText Markup Language | MDN — Подробная информация о мета-теге viewport на MDN.
2. CSS Viewport Module Level 1 — Официальная спецификация CSS viewport из W3C.
3. ios10 – disable viewport zooming iOS 10+ safari? – Stack Overflow — Полезные мнения и советы из обсуждений на Stack Overflow.
4. Mobifying your HTML5 site | Articles | web.dev — Рекомендации по адаптации сайта под мобильные устройства с акцентом на настройках viewport.
5. CSS pixel – MDN Web Docs Glossary: Definitions of Web-related terms | MDN — Объяснение понятия "CSS-пиксель", играющего ключевую роль в масштабировании.
6. Responsive web design basics | Articles | web.dev — Основные принципы создания адаптивного контента для различных устройств.