title: Bootstrap not scaling properly on mobile devices
body: <p>I've been developing a website in Rails for a local college as a side project for the past few weeks. It's my first production site in Rails and using Bootstrap to speed development. The website looks fine and all is working great except when I try to access the website  from a mobile device. When you first load a page the page appears zoomed in. I'm allowing user-scaling so it's not that big of an issue, just an annoying little quirk I was hoping to get rid of.</p>
  
  <p>It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine.</p>
  
  <p>Here are my meta tags</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta name="HandheldFriendly" content="true"&gt;
  </code></pre>
  
  <p>Here are some pictures since I'm not overly sure I'm being clear.</p>
  
  <hr>
  
  <p>Vertical Orientation: 
  <a href="http://imgur.com/guJIG5k" rel="noreferrer">http://imgur.com/guJIG5k</a></p>
  
  <p>Horizontal Orientation:
  <a href="http://imgur.com/SNwvPFD" rel="noreferrer">http://imgur.com/SNwvPFD</a></p>
  
  <p>The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S</p>