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

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

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

Есть ли способ сбросить значение масштаба области просмотра динамически. Похоже, что "initial-scale" не работает, как и сброс "minimum-scale" и "maximum-scale" на 1.0

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

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

"Вам нужно использовать -webkit-transform: scale(1.1); webkit transition."

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

Вот некоторый код для иллюстрации проблемы.

В мета-теге для viewport выглядит так:

остальная часть страницы выглядит так:

и вот 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");
});