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

Question

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

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

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

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

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

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

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

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

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

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

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

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 13 часов назад
- 40 просмотров
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 16 часов назад
- 28 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 16 часов назад
- 102 просмотра
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 19 часов назад
- 47 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 101 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 112 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Обработать фото в стиле ASCII

22 нояб. 2024, в 08:04

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

Сверстать десктоп версию сайта в tailwind

22 нояб. 2024, в 06:06

1500 руб./в час

Создать TG бота

22 нояб. 2024, в 06:04

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

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>

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

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

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

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

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

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