title: Reset page scale dynamically on iOs devices using Javascript
body: <p>I want to dynamically reset zoom or scale in my Javascript app when it is open.
  Let's say that the start page is zoomed in but when I open my app in a new dialog I want zoom to be reset.</p>
  
  <p>I've tried dynamically changing the meta tags which works for android but fails On iOS. 
  Is there any other trick. </p>
  
  <p>Below is my function where I tried everything possible.</p>
  
  <pre><code>function setMeta(){
  
  
    $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, user-scalable=0');
      document.body.style.zoom="100%";
  
  document.getElementById("medView").setAttribute('content','user-scalable=no, width=device-width, minimum-scale = 1, maximum-scale = 1');
  
        if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
          var viewportmeta = document.querySelector('meta[name="viewport"]');
          if (viewportmeta) {
              alert("we are here");
              viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
              document.body.addEventListener('gesturestart', function () {
                  viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
              }, false);
          }
      }
  
      }
  </code></pre>