Как динамически изменять уровень масштабирования с помощью Javascript?

Я пытаюсь понять, как сбросить уровень масштабирования на веб-странице для ios. Кажется, что когда пользователь увеличивает / уменьшает масштаб, функция масштабирования больше не работает. Мне нужны щипковые жесты, но я хочу программно сбросить масштаб. У кого-нибудь есть идеи по динамическому изменению масштабирования с помощью Javascript / jQuery?


<meta id="viewportMeta" name="viewport" content="user-scalable=1, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />


$(document).ready(function () {
      $("#zoomOut").click(function(){
            $('meta[name=viewport]').attr('content', 'initial-scale=0.5; maximum-scale1; user-scalable=1;');
        });

      $("#zoomIn").click(function(){
             $('meta[name=viewport]').attr('content', 'initial-scale=1; maximum-scale=1.0; user-scalable=1;');
        });
});

jquery viewport pinchzoom
person MatsDesign    schedule 10.01.2013    source источник
comment
Не могли бы вы заявить, что ваш код не выполняет то, что задумано? Или вы ищете дополнительные идеи, как еще вы можете это сделать?   -  person Calvin    schedule 10.01.2013

Ответы (1)


arrow_upward
16
arrow_downward

------ Обновлять ------

В iOS7 это больше не проблема. И есть лучшее исправление от Скотта Джеля на github scottjehl / iOS-Orientationchange-Fix, которое работает на iOS6.

------ Оригинальный ответ ------

Взяв ответы из этих:

Джереми Кейт (@adactio) предлагает хорошее решение этой проблемы в своем блоге Ориентация и масштаб

Сохраняйте масштабируемость разметки, не устанавливая в разметке максимальный масштаб.

<meta name="viewport" content="width=device-width, initial-scale=1">

Затем отключите масштабируемость с помощью javascript при загрузке до начала жестов, когда вы снова разрешите масштабируемость с помощью этого сценария:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}
person Calvin    schedule 10.01.2013
comment
Итак, когда вы зажимаете зум, почему он не позволяет сбросить начальный масштаб? - person MatsDesign; 14.01.2013
comment
Это старый вопрос, но я просто поддержал ваш ответ, потому что он правильный, и очень раздражает, когда задающий вопрос не может выделить время, чтобы поблагодарить вас, выбрав ваш как правильный. - person Optox; 25.06.2013
comment
Спасибо, Optox. Очень признателен. - person Calvin; 02.07.2013
comment
Благодарность! работал как шарм. Поместил код в файл и добавил в заголовок. - person Norman Bird; 17.06.2014
comment
Обновление мета области просмотра с помощью JS не привело к изменению масштабирования в моих тестах на мобильном сафари ios7. - person coulix; 08.12.2015
comment
@coulix теперь работает иначе, это iOS7. Я обновил свой ответ, чтобы сделать его более актуальным. - person Calvin; 08.02.2016
comment
Этот код в первую очередь предотвратит масштабирование, но если браузер уже увеличен, есть ли способ динамически уменьшить масштаб? - person kshetline; 21.07.2021