Как запретить зумить страничку пальцами, когда пользователь смотрит сайт с телефона?

Question

Сергей Шилов @Olivoin

Как запретить зумить страничку пальцами, когда пользователь смотрит сайт с телефона?

Делаю мобильную версию сайта по средствам @media и возник вопрос: как сделать так, чтобы пользователь не мог приблизить или отдалить содержимое с помощью пальц, как мы все привыкли?

На мобильной версии ВК (m.vk.com) это невозможно.

Вопрос задан более трёх лет назад
27298 просмотров

1 комментарий

Подписаться 10 Оценить 1 комментарий

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 4

3 комментария

Антон @Yadalay

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

Написано более трёх лет назад

Артем @Artemeey

В новых браузерах настройка viewport не будет запрещать zoom.
Чтобы запретить zoom, можно отловить жесты и отменить их действие.

// отключение zoom через скролл (в том числе трекападами в macOS)
document.addEventListener('mousewheel', function(e){
	if(!e.ctrlKey && !e.metaKey) return;

	e.preventDefault();
	e.stopImmediatePropagation();
}, {passive:false});

// отключение zoom прикосновениями (в том числе трекападами и т.п.) в Safari и iOS
document.addEventListener('gesturestart', function(e){
	e.preventDefault();
	e.stopImmediatePropagation();
}, {passive:false});

// отключение zoom через клавиатуру (ctrl + "+", ctrl + "-")
// кнопки браузера для управления zoom отключены не будут
document.addEventListener('keydown', function(e){
	if(!e.ctrlKey && !e.metaKey) return;
	if(e.keyCode != 189 && e.keyCode != 187) return;

	e.preventDefault();
	e.stopImmediatePropagation();
}, {passive:false});

Написано более трёх лет назад

Антон Вейда @aveyda7

Артем, thanks

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 2 часа назад
- 18 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 13 часов назад
- 76 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 71 просмотр
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
Вёрстка

+1 ещё

Простой
Как правильно должна масштабироватся верстка сайта на десктопе?
- 1 подписчик
- вчера
- 88 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 31 просмотр
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 101 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 92 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 88 просмотров
2

ответа
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

10000 руб./за проект

Answer 1 · 2014-02-14 18:24:24

Юрий Лобанов @iiil

Инженер и вэб-дизайнер, рисую.

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

Ответ написан более трёх лет назад

2 комментария

Answer 2 · 2014-02-17 05:11:04

Андрей @svistiboshka

живые веб интерфейсы

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

Ответ написан более трёх лет назад

3 комментария

Answer 3 · 2016-11-03 11:54:15

В стандартном андроид браузере с данным мета-тегом все равно увеличение пальцами работает(( есть решение, которое работает для этого браузера?

Answer 4 · 2018-07-07 22:53:22

Могу помочь только тем где копать, все мобильные лендосы на cpa партнерке M1-shop как раз так заточены, может что то посмотрит верстку - да поделится, будем признательны))

Answer 5 · 2018-08-19 16:29:53

WNetwork1 @WNetwork1

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

Вставь это в <head>

Ответ написан более трёх лет назад

Комментировать

Как запретить зумить страничку пальцами, когда пользователь смотрит сайт с телефона?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт