Czy istnieje sposób, aby przywrócić skalę rzutni dynamicznie do 1,0

Question

Im pracuje nad aa telefonu internetowym sklepie i utknął podczas realizacji funkcji zoom produkt

Po kliknięciu obrazu „user-skalowalna” jest dozwolone, a maksymalna skala jest ustawiona na 10.0 Gdy użytkownik przybliża produkt gestem szczypania, wszystko działa poprawnie. Ale po zamknięciu powiększonego obrazu skala nie jest resetowana do 1,0.

Czy istnieje sposób na dynamiczne resetowanie wartości skali widoku. „wstępną skalę” wydaje się nie do pracy, ani nie resetowanie „minimalnych skalę” i „maksymalną skalę” do 1,0

Problemy występuje na iPhone/iPad

Tam zdaje się być rozwiązaniem , ale nie wiem, do którego elementu powinienem zastosować ten wpis: How to reset viewport scaling without full page refresh?

"Musisz użyć opcji -webkit-transform: scale (1.1), webkit transition."

Ale nie wiem do jakiego elementu został zastosowany styl.

Oto trochę kodu ilustrującego problem.

W meta tagu dla rzutni wygląda następująco:

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

reszta strony wygląda następująco:

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

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

i to jest 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, ta technika manipulowania rzutnią działa we wszystkich nowoczesnych przeglądarkach z wyjątkiem przeglądarki 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> 

wydaje się, że klucz jest ustawienie atrybutu w tagu metaid, dzięki czemu można go łatwo wybrać z JS i zastąpić wartość atrybutu content.

Answer 2

Działa we wszystkich nowoczesnych przeglądarkach. Zrobiłem to na kilku stronach internetowych i wszystko działa dobrze. Ale resetowanie nie jest rozwiązaniem problemu. Musisz zmienić skalę i szerokość widoku podczas zmiany okoliczności. Należy go zmienić w przypadku zmiany orientacji i zmiany rozmiaru ekranu, a także oczywiście przy załadowaniu po wykryciu rozmiaru ekranu. Jeśli otrzymasz wartości dla aktualnej szerokości, możesz obliczyć skalę. (Nawiasem mówiąc, gdy orientacja wynosi 90 lub -90, należy przyjąć wysokość jako szerokość). Na przykład Jeśli główny kontener ma szerokość 960px, a w_width jest bieżącą szerokością, otrzymujesz ją dynamicznie.

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