title: Is there a way to reset the scale of the viewport dynamically to 1.0
body: <p>Im working on a a mobile online-store And got stuck while implementing the product zoom function</p>
  
  <p>After clicking an Image "user-scalable" is allowed and maximum-scale is set to 10.0
  When the user zooms in on the product with a pinch gesture, everything works fine. 
  But after closing the zoomed Image the scale is not reset to 1.0. </p>
  
  <p>Is there a way to reset the scale value of the viewport dynamically.
  The "initial-scale" seems not to work, neither does reseting the "minimum-scale" and "maximum-scale" to 1.0</p>
  
  <p>The problems occurs on iPhone / iPad</p>
  
  <p>There seems to be a solution, but i don't know to which element i should apply the on this post:
  <a href="https://stackoverflow.com/questions/5380385/how-to-reset-viewport-scaling-without-full-page-refresh">How to reset viewport scaling without full page refresh?</a></p>
  
  <p>"You need to use -webkit-transform: scale(1.1); webkit transition."</p>
  
  <p>But I don't know to which element the style is applied.</p>
  
  <p>Here is some code to illustrate the Problem.</p>
  
  <p>In  the meta Tag for the viewport looks like this:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0" /&gt;
  </code></pre>
  
  <p>the rest of the page Looks like this:</p>
  
  <pre><code>&lt;div id="page"&gt;
      &lt;img src="images/smallProductImage.jpg"&gt;
  &lt;/div&gt;
  
  &lt;div id="zoom"&gt;
      &lt;div class="jsZoomImageContainer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the javascript::</p>
  
  <pre><code>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");
  });
  </code></pre>