title: Toggling user-scalable on and off with a button on mobile devices
body: <p>My goal is to havea button which turns on and off the zoom capabilities on mobile devices. </p>
  
  <p>I've been successeful in creating a button which uses the onClick event to call the following function in order to turn on user-scalable after it innitially loads with user-scalable="no", and it works exaclty as expected:</p>
  
  <pre><code>function zoom(){
  viewport = document.querySelector("meta[name=viewport]");
  viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=3.0; user-scalable=1;');
  
  alert("does this work?");
  }
  </code></pre>
  
  <p>However, I need to take it as step further and allow the user to turn zoom off on the second touch of the button, then on again the third time. etc. Below is the current javascript code, and the if statement works correctly, but now I can't seem to affect the ability to zoom.</p>
  
  <pre><code>var toggleZoom = 0;
  
  function zoom(){
  
  toggleZoom++;
  var toggleModulus=toggleZoom%2;
  
  if(toggleModulus==1)
  {
          viewport = document.querySelector("meta[name=viewport]");
          viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=3.0; user-scalable=1;');
          alert("if");
  }
  
  else
  {
          viewport = document.querySelector("meta[name=viewport]");
          viewport.setAttribute('content', 'width=device-width;   initial-scale=1.0; maximum-scale=1.0; user-scalable=no;');
          alert("else");
  };
  
  alert("function complete");
  }
  </code></pre>
  
  <p>Is there something I'm missing here? I don't understand why the first code would allow me to turn on the zoom when I touch a button, but the second code doesn't. Also, everything within the second code seems to work correctly except changing the attribute.</p>