title: HTML5 Boilerplate: Meta viewport and width=device-width
body: <p>I'm building an adaptive/responsive website.</p>
  
  <p>Regarding this recent change to the HTML5BP:</p>
  
  <p>"<a href="http://h5bp.com/viewport" rel="noreferrer">mobile/iOS css revisions</a>"</p>
  
  <p>I've started using:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
  </code></pre>
  
  <p>... and I have this in my CSS:</p>
  
  <pre><code>html {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  }
  </code></pre>
  
  <p>When <code>initial-scale=1</code> was included, rotating from vertical to horizontal (on iPad/iPhone) caused the layout to change from 2 columns (for example) to 3 columns (due to meida queries, <code>initial-scale=1</code> and <a href="https://gist.github.com/901295" rel="noreferrer">JS fix for viewport scale bug</a>).</p>
  
  <p><strong>To summarize</strong>, when in landscape mode, this zooms the page:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
  </code></pre>
  
  <p>... and this does not:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p><strong><em>Note:</strong> You can see this zooming effect in action when viewing the <a href="http://html5boilerplate.com/" rel="noreferrer">HTML5BP website</a> on an iPad/iPhone.</em></p>
  
  <p>My questions:</p>
  
  <ol>
  <li>Is this becoming the new standard (i.e. zoom when in landscape mode)?</li>
  <li>I'm having a heck of a time explaining this change to my co-workers and bosses... They're used to seeing a different layout in horizontal mode; now that the page zooms and the layout stays the same (except it's larger). Any tips on how to explain this to the ignorant masses (of which, I might be included)?</li>
  </ol>
  
  <hr>
  
  <p>@robertc: Thanks! That's very helpful.</p>
  
  <p>I actually like <strong>not</strong> having the <code>initial-scale=1</code>; it's my co-workers who are used to seeing the layout change rather than zoom. I'm sure I'll be <em>forced</em> to add <code>initial-scale=1</code> just to please everyone (because <strong>not</strong> zooming, and seeing the layout change, is what they're used to seeing).</p>
  
  <p>I just noticed the HTML5BP <a href="https://github.com/h5bp/html5-boilerplate/blob/master/index.html" rel="noreferrer">index.html on github</a>, and <a href="http://html5boilerplate.com/" rel="noreferrer">the website</a>, was using <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>; to me, that's good enough reason to ditch <code>initial-scale=1</code>, but I get raised eyebrows when I try to explain <a href="https://github.com/h5bp/html5-boilerplate/issues/37" rel="noreferrer">these things</a> to the "non-geeks". :D</p>