title: Redrawing elements ignores user-scalable=0 in Android Browser. Why?
body: <p><strong>This is the meta tag</strong></p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"&gt;
  </code></pre>
  
  <p><strong>Problem</strong> - I wanted to force a redraw (to solve another problem) when the orientation was changed by hiding and unhiding a container <code>&lt;div id="redraw&gt;"</code>. Once redraw occurs however, the Android browser now allows me to zoom in even though I had set <code>user-scalable=0</code>.</p>
  
  <p>Why is this? My guess was that Android had changed the meta tag on redraw by setting <code>user-scalable=1</code>. But this was not the case, because as you can see in the function <code>redrawOrientation()</code> below, I change the meta tag back to default. I did this by redrawing on landscape orientation only.</p>
  
  <p>This seems like a bug to me. Can anyone suggest a reason for this issue?</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code> function redrawOrientation() {
  
        viewport = document.querySelector("meta[name=viewport]");
  
        if (Math.abs(window.orientation) === 90) {      
  
             $('#redraw').hide().show(0);
             viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
  
             alert("Landscape: maximum-scale=2.0");
  
        } else {       
  
             //$('#redraw').hide().show(0);
             viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');   
  
             alert("Portrait: maximum-scale=1.0");
  
        }
   }
  
   window.onorientationchange = redrawOrientation;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="redraw"&gt;
       &lt;div id="sidebar"&gt;&lt;/div&gt;
       &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>