Отключение зума в Mobile Safari: корректная настройка viewport

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Если вы желаете запретить масштабирование в мобильном Safari, вставьте следующий тег в раздел head вашего HTML-документа:

HTML
Скопировать код
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Такой тег устанавливает масштаб на уровне 1.0, тем самым предотвращая увеличение страницы при помощи жеста "пинч" (раздвижение двумя пальцами).

Кинга Идем в IT: пошаговый план для смены профессии

Избегаем подводных камней

Даже проверенные решения могут иногда подводить. Здесь представлены некоторые советы, которые помогут избежать непредвиденного масштабирования:

  • Кавычки: Все атрибуты в HTML должны быть взяты в правильные двойные кавычки.
  • Расстановка атрибутов: Проанализируйте ваш код и убедитесь, что атрибуты в значении content мета-тега разделены запятыми.
  • Целостность HTML: Проверьте ваш код на валидность с помощью HTML-валидатора – это недооцениваемый инструмент для каждого разработчика!
  • Изучение руководств: Не забывайте регулярно ознакамливаться с официальной документацией Apple, поскольку там могут быть предложены новые рекомендации относительно использования мета-тегов для viewport.

iOS 10+? На помощь приходит CSS!

Со вступлением в силу iOS 10, Apple начала игнорировать значение user-scalable=no. Но не стоит расстраиваться, управлять масштабом можно с использованием CSS-свойства touch-action.

Пример использования touch-action:

CSS
Скопировать код
/* Позволяет ограничить масштабирование, сохраняя возможность прокрутки */
element {
  touch-action: pan-x pan-y; 
}

Используйте комбинацию pan-x pan-y, чтобы сохранить скролл вместо touch-action: none.

Для отключения масштабирования pinch-to-zoom с помощью JavaScript:

JS
Скопировать код
// Запрет событий масштабирования 'gesturestart'
document.addEventListener('gesturestart', function(event) {
  event.preventDefault();
});

Старые версии iOS? Не забудьте и о них!

Для версий iOS 9 и ниже используйте event.preventDefault() в событиях touchmove.

JS
Скопировать код
/* Предотвращение масштабирования через 'touchmove' в старых версиях iOS */
document.addEventListener('touchmove', function(event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

Визуализация блокировки viewport

Viewport в мобильном Safari можно ассоциировать с воротами (🚪), а попытки пользователей масштабировать страницу – с ключем-отмычкой (🔓).

Для обеспечения "защиты" мы устанавливаем замок (🔒):

HTML
Скопировать код
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Визуализация изменений:

Markdown
Скопировать код
Ворота до: 🚪🔓
Ворота после: 🚪🔒

Важный элемент: user-scalable=no выступает в роли ключа (🔑), который блокирует доступ к функции масштабирования. 🔒📡

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

  1. Поддерживаемые мета-теги – детальное руководство от Apple по настройке viewport для мобильного Safari.
  2. Как отключить масштабирование pinch-to-zoom на мобильных сайтах – подробное объяснение процесса отключения масштабирования в мобильных веб-приложениях.
  3. Отзывчивый веб-дизайн – A List Apart – детальное исследование принципов адаптивного веб-дизайна, целью которого является предоставление удобного пользовательского опыта без неожиданного масштабирования.
  4. Тег <meta name="viewport"> без атрибутов width или initial-scale – советы от разработчиков Chrome о том, как настройка viewport влияет на поведение мобильного Safari.
  5. Модуль CSS Device Adaptation Level 1 – исчерпывающее описание и стандарты консорциума W3C, посвященные концепции 'viewport' и её значению в адаптивном дизайне.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Как запретить масштабирование в мобильном Safari?
1 / 5