title: Responsive design on android smartphone not fitting to screen
body: <p>I'm having problems getting a Viewport which works on an android smartphone.</p>
  
  <p>My site is fully responsive down to 480 pixels wide, whereupon it has a <code>min-width</code> set of 480px on the <code>body</code> tag.</p>
  
  <p>My first viewport was this:</p>
  
  <pre><code>&lt;meta id="myViewport" name="viewport" content="width=screen-width,  user-scalable=yes"/&gt;
  </code></pre>
  
  <p>This worked on most devices I checked, but on an Android phone, it appeared zoomed in and did not automatically shrink-to-fit to the width of the screen.</p>
  
  <p>I then tried using javascript so that <code>onload</code>, the width attribute of the viewport changed to <code>480</code> rather than <code>screen-width</code> should <code>window.innerWidth &lt; 480</code>.  This half worked:  when the page loaded, it then resized to fit the screen.  However, during the load, it was still zoomed in, as expected.</p>
  
  <p>Finally, I changed it to...</p>
  
  <pre><code>&lt;script&gt;
       if (window.innerWidth &lt; 480) {
            document.write('&lt;meta id="myViewport" name="viewport" content="width=480,  user-scalable=yes"/&gt;');
  
       }
  
       else {
            document.write('&lt;meta id="myViewport" name="viewport" content="width=screen-width,  user-scalable=yes"/&gt;');
  
       }
  &lt;/script&gt;
  </code></pre>
  
  <p>This goes back to being zoomed-in.  It works on other devices I have used.</p>
  
  <p>Any ideas?</p>