Как отключить зум на сайте
При разработке одностраничных сайтов (One-page) или веб-приложений, заказчики просят отключать масштабирование (зум) на мобильных устройствах.
На первый взгляд это просто – но есть нюансы. Разберем подробно, как отключить зум на сайте во всех браузерах, включая в🤬й Safari на iPhone.
1. Отключаем зум через meta-тег
В файле index.html в теге header нужно добавить:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, target-densitydpi=device-dpi, viewport-fit=cover" />
content="user-scalable=no – Запрещает пользователю зумировать страницу
initial-scale=1.0 – Начальный масштаб страницы 1х
maximum-scale=1.0 – Максимальный масштаб страницы
minimum-scale=1.0 – Минимальный масштаб страницы
width=device-width – Ширина viewport равна ширине экрана устройства (чтобы сайт не выглядел как уменьшенная версия сайта с PC)
height=device-height – Высота viewport равна высоте экрана устройства
viewport-fit=cover – Для iPhone с откусанным экраном, растягивает страницу на весь экран, включая области рядом откусанной областью «домашней полоской»
2. В CSS нужно запретить жесты и резиновый скролл
body,
html {
overscroll-behavior: none;
touch-action: none;
}overscroll-behavior: none – Отключаем резиновый эффект, если доскроллить страницу до конца
touch-action: none – Отключаем жесты
Теперь на всех нормальных устройства скролл отключен.
😡 Но есть iPhone со своим Safari. Запрет скролла в Safari не работает, так как Apple считает что пользователи должны зумировать контент.
Как отключить зум на iPhone в Safari надо сделать это через JS.
Проще добавить в конце тега body вот такой скрипт
<script>
document.addEventListener("gesturestart", function (e) {
e.preventDefault();
});
</script>Тут мы перехватываем событие gesturestart (жесты) и отключаем их preventDefault()
👏 Теперь ваш сайт не масштабируется ни в Android, и на iPhone.