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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ворота до: 🚪🔓
Ворота после: 🚪🔒

Важный элемент: 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' и её значению в адаптивном дизайне.