¿Hay una manera de restablecer la escala de la ventana gráfica de forma dinámica a 1,0

Question

Im trabajando en un un móvil-tienda en línea y quedó atascado mientras se implementa la función de zoom del producto

Tras hacer clic en una imagen "de usuario escalable" y la escala máxima se establece en 10.0 Cuando el usuario amplía el producto con un gesto de pellizco, todo funciona bien. Pero después de cerrar la imagen ampliada, la escala no se restablece a 1.0.

¿Hay alguna manera de restablecer dinámicamente el valor de escala de la ventana gráfica? El "inicial escala" parece que no funciona, tampoco resetear el "mínimo escala" y "máxima escala" a 1.0

Los problemas se produce en el iPhone/iPad

No parece haber una solución , pero no sé a qué elemento debo aplicar el en esta publicación: How to reset viewport scaling without full page refresh?

"Necesita utilizar -webkit-transform: scale (1.1); webkit transition."

Pero no sé a qué elemento se aplica el estilo.

Aquí hay algunos códigos para ilustrar el problema.

En la etiqueta meta para la ventana gráfica se parece a esto:

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

el resto de la página se ve así:

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

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

y este es el 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"); 
}); 

Answer 1

According to ppk, esta técnica para la manipulación de ventanas funciona en todos los navegadores modernos excepto en 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> 

parece que la clave está estableciendo un atributo id en la etiqueta meta para que pueda seleccionar fácilmente con JS y sustituya el valor del atributo content.

Answer 2

Funciona en todos los navegadores modernos. Lo he hecho en algunos sitios web y todo funciona bien. Pero restablecer no es una solución al problema. Debe cambiar correctamente el ancho de la balanza y la vista cuando cambien las circunstancias. Debe cambiarlo cuando cambie la orientación y cuando cambie el tamaño de la pantalla y, por supuesto, cuando se cargue cuando se detecte el tamaño de la pantalla. Si obtiene valores para el ancho actual, puede calcular la escala. (Por cierto, cuando la orientación es 90 o -90, debe tomar la altura como ancho). Por ejemplo, Si su contenedor principal tiene 960px de ancho y w_width es el ancho actual que obtiene dinámicamente.

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