title: Why is CSS min-width causing my responsive site to be zoomed in on a mobile?
body: <p>I'm building a responsive website and I'm having a problem with it which means that when I view it on a mobile, it's automatically zoomed in by a small amount. I can zoom out to view the whole width of the page, but when I click on a link to another page, the new page loads in slightly zoomed in as well (maybe by 10% or so).</p>
  
  <p>I've set an appropriate viewport which should deal with the problem:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  </code></pre>
  
  <p>I also have set a minimum width on the body, which is necessary as below this width the site layout breaks:</p>
  
  <pre><code>body {
      min-width: 400px;
  }
  </code></pre>
  
  <p>Without the min-width the site works fine on mobile devices, but with the min-width, the pages load slightly zoomed in. I've tried this on Chrome and the stock browser on Android (on a Galaxy S3 and Galaxy Nexus) with the same results, so it seems I am misunderstanding something rather than having discovered a bug.</p>
  
  <p>Ultimately I want the site fully zoomed out (initial-scale=1) and the minimum display width set at 400px so I don't need to worry about layouts at tighter widths. Is this even achievable?</p>