Есть ли способ reset масштаб окна просмотра динамически 1.0

Я работаю над мобильным интернет-магазином И застрял во время реализации функции масштабирования продукта

После щелчка на изображении разрешено "масштабируемое пользователем", а максимальное значение - 10,0 Когда пользователь нажимает на устройство с жестким жестом, все работает нормально. Но после закрытия увеличенного изображения масштаб не равен reset до 1.0.

Есть ли способ reset масштабировать значение окна просмотра динамически. "Начальная шкала", похоже, не работает, и не отменяет "минимальную шкалу" и "максимальную шкалу" до 1.0

Проблемы возникают на iPhone/iPad

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

"Вам нужно использовать -webkit-transform: scale (1.1), переход webkit."

Но я не знаю, к какому стилю применяется стиль.

Вот какой код иллюстрирует проблему.

В метатеге для окна просмотра выглядит так:

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

остальная часть страницы выглядит следующим образом:

<div id="page">
    <img src="images/smallProductImage.jpg">
</div>

<div id="zoom">
    <div class="jsZoomImageContainer"></div>
</div>

и это javascript::

zoom:{
    img: null,
    initialScreen:null,

    load:function(src){             

        //load the image and show it when loaded

        showLoadingAnimation();
        this.img = new Image();
        this.img.src = src;

        jQuery(this.img).load(function(){
            zoom.show();
        });
    },

    show:function(){

        var screenWidth, screenHeight, imageWidth, imageHeight, scale, ctx;             

        hideLoadingAnimation();
        jQuery("#page").hide();         
        jQuery("#zoom").show();

        jQuery(".jsZoomImageContainer").empty();
        this.initialScreen =[jQuery(window).width(),  jQuery(window).height()]
        jQuery(".jsZoomImageContainer").append(this.img);               


        imageWidth = jQuery(this.img).width();
        imageHeight = jQuery(this.img).height();

        scale = this.initialScreen[0] / imageWidth ;

        jQuery(this.img).width(imageWidth * scale)
        jQuery(this.img).height(imageHeight * scale)


        jQuery(".jsZoomImageContainer").click(function(){
             zoom.hide();
        });

        jQuery('meta[name="viewport"]',"head").attr("content","user-scalable=yes, initial-scale:1.0, minimum-scale=1.0, maximum-scale=10.0")                 

    },

    hide:function(){                        
        jQuery(".jsZoomImageContainer").empty();                        
        jQuery('meta[name="viewport"]',"head").attr("content","user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0") 

        jQuery("#zoom").hide();
        jQuery("#page").show();

        this.img = null;
        this.initialScreen = null;

    }
}

jQuery("#page img").click(function(){
    zoom.load("images/bigProductImage.jpg");
});

Ответ 1

Согласно ppk, этот метод манипуляции с видовым окном работает во всех современных браузерах, кроме Firefox:

<meta id="testViewport" name="viewport" content="width = 380">
<script>
if (screen.width > 740) {
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=740');
}
</script>

Кажется, что ключ устанавливает атрибут id в теге meta, поэтому вы можете легко его выбрать с помощью JS и заменить значение атрибута content.

Ответ 2

Он работает во всех современных браузерах. Я сделал это на нескольких веб-сайтах, и все работает нормально. Но сброс не является решением проблемы. При изменении обстоятельств необходимо изменить масштаб и ширину окна просмотра. Вы должны изменить его, когда меняется ориентация, и когда размер экрана изменяется и, конечно, при загрузке при обнаружении размера экрана. Если вы получите значения для текущей ширины, вы можете рассчитать масштаб. (Кстати, когда ориентация 90 или -90, вы должны взять высоту как ширину). Например, Если ваш основной контейнер имеет ширину 960 пикселей, а w_width - это текущая ширина, которую вы получаете динамически.

scale=100/100/(960/w_width);
scale=scale.toFixed(2) ;
jQuery('meta[name=viewport]').attr('content', "width="+w_width+", initial-scale="+scale);