C'è un modo per ripristinare la scala della finestra in modo dinamico a 1,0

Question

sto lavorando su un un cellulare negozio online e rimasto bloccato durante l'implementazione della funzione di prodotto zoom

Dopo aver cliccato un'immagine "user-scalabile" è consentito e la scala massima è impostata su 10,0 Quando l'utente ingrandisce il prodotto con un gesto di pizzicamento, tutto funziona correttamente. Ma dopo aver chiuso l'immagine ingrandita, la scala non viene riportata a 1.0.

C'è un modo per ripristinare dinamicamente il valore di scala della finestra. Il "iniziale di scala" sembra non funzionare, neppure resettare il "minimo scala" e "massima scala" per 1,0

I problemi si verifica su iPhone/iPad

Sembra che ci sia una soluzione , ma non so a quale elemento dovrei applicare questo post: How to reset viewport scaling without full page refresh?

"È necessario utilizzare -webkit-transform: scale (1.1); transizione webkit."

Ma non so a quale elemento viene applicato lo stile.

Ecco un codice per illustrare il problema.

Nel meta tag per la finestra si presenta così:

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

il resto della pagina si presenta così:

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

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

e questo è il 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, questa tecnica per la manipolazione della vista funziona su tutti i browser moderni ad eccezione di 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> 

sembra la chiave è la creazione di un attributo id nel tag meta modo da poter selezionare facilmente con JS e sostituire il valore dell'attributo content.

Answer 2

Funziona con tutti i browser moderni. L'ho fatto in alcuni siti web e tutto funziona bene. Ma il ripristino non è una soluzione al problema. È necessario modificare correttamente la scala e la larghezza della vista quando le circostanze cambiano. È necessario modificarlo quando l'orientamento cambia e quando le dimensioni dello schermo cambiano e, naturalmente, quando si rileva un carico sulla dimensione dello schermo. Se ottieni valori per la larghezza corrente, puoi calcolare la scala. (A proposito, quando l'orientamento è 90 o -90, dovresti prendere l'altezza come larghezza). Ad esempio, Se il contenitore principale ha una larghezza di 960px e w_width è la larghezza corrente, si ottiene dinamicamente.

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