Мета-тег viewport был введен Apple для упрощения адаптивного дизайна, позже большинство поставщиков браузеров начали обрабатывать этот тег. Однако метатег viewport не является частью каких-либо веб-стандартов, максимальный масштаб определяет, насколько пользователь может изменять масштаб, и хотя он работает для большинства браузеров на мобильных устройствах, он не работает для настольных браузеров.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3" />
Если вы используете этот тег, пользователи не смогут увеличить масштаб более чем на 300% на мобильных устройствах, однако на настольных компьютерах они не ограничены.
CSS Модуль адаптации устройства представил видовой экран правила, которые должны позволять вам управлять масштабированием, максимальным и минимальным увеличением области просмотра. Однако это все еще в рабочем состоянии черновика.
Следующее должно быть кросс-браузерным решением, и согласно таблице совместимости MDN оно должно работать на chrome, но на самом деле это нет.
@viewport {
zoom: 1;
max-zoom: 3
}
По иронии судьбы chrome на самом деле правильно обрабатывает правило масштабирования, но отбрасывает максимальное увеличение в браузерах.
В любом случае на практике не стоит ограничивать пользователей от масштабирования, если вы думаете, что при большом увеличении изображение определенной страницы выглядит крайне некрасиво, вы можете справиться с этим с помощью медиазапросов.
Но если вы действительно в отчаянии, то вы могли бы переопределить ярлык для масштабирования в настольных браузерах и самостоятельно изменить базовый уровень масштабирования документа. Хотя это работает, это будет уродливым хаком, и вам придется обрабатывать разные ярлыки, основанные на разных операционных системах / браузерах, не говоря уже о том, что если у пользователя есть пользовательское сопоставление ярлыков, ваш хак не будет работать.