Запретить увеличение масштаба (pinchin), но разрешить уменьшение (pinchout) на мобильных устройствах
Потребовалось разрешить пользователям уменьшить масштаб мобильного сайта до стандартного с одновременным запретом увеличивать масштаб обратно.Если страница статичная, то можно изначально запретить изменение масштаба метатэгом в пределах <head>...</head>:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1, user-scalable=no" />
Однако, если происходит переключение между слоями в пределах одной страницы, и в одном слое изменение масштаба разрешено, то при включении другого слоя увеличенный масштаб может "залипнуть".
Выход простой. Нужно отследить два пользовательских события: уменьшение двумя пальцами (pinchin) и увеличение (pinchout). Для каждого из них менять содержимое метатэга viewport так, чтобы либо запрещать, либо разрешать изменение масштаба.
JQuery не содержит обработчика этих событий. Подключаем библиотеку Hammer.js и пишем скрипт:
Hammer(window).on('pinchout', function(ev){
$('meta[name="viewport"]').attr('content','width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no');
});
Hammer(window).on('pinchin', function(ev){
$('meta[name="viewport"]').attr('content','width=device-width, minimum-scale=1, maximum-scale=4, initial-scale=1, user-scalable=yes');
});
Результат: если масштаб экрана был увеличен, в новом слое пользователь может его уменьшить. Обратно увеличить не получится.