title: Web page (made with twitter bootstrap) zoomed in on iphone, how to force it to fit iPhone screen?
body: <p>I try to make html.page with twitter bootstrap (NOT responsive). I grab code for html footer from here <a href="https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap">Flushing footer to bottom of the page, twitter bootstrap</a></p>
  
  <p>But I've got some problems with it: </p>
  
  <ol>
  <li>Footer width on iPhone was less than content width. I fixed it adding min-width (see it in main2.css)</li>
  <li>Now I've got another problem: 
  I've set viewport meta tag and disable bootstrap-responsive.css, but I don't understand why the entire page does not fit the screen on iPhone (it's kinda zoomed in)? How to zoom it out by default?</li>
  <li>I can't zoom it out. iPhone zoom it in after I stop zooming. I could delete viewport meta tag, but is there any other solution?</li>
  </ol>
  
  <p>Here is a screenshot: <img src="https://i.stack.imgur.com/qpbvZ.jpg" alt="Page zoomed in on iPhone"> (It's iOs simulator but on real phone it is the same)</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
          &lt;!-- Le styles --&gt;
          &lt;link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" /&gt;
          &lt;!-- &lt;link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" /&gt; --&gt;
          &lt;link rel="stylesheet" type="text/css" href="assets/css/main2.css" /&gt;
          &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
          &lt;!--[if lt IE 9]&gt;
          &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
          &lt;!-- jquery --&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrap"&gt;
              &lt;div id="main" class="container clear-top"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="span12"&gt;
                          &lt;p&gt;Your content here. Your content here. Your content here&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;footer class="footer"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="offset8 span4"&gt;
                          This is footer text. This is footer text. This is footer text. 
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main2.css:</p>
  
  <pre><code>html, body {
    height: 100%;
  }
  
  #wrap {
    min-height: 100%;
  }
  
  #main {
    overflow:auto;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
  }
  
  .footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    padding-top:20px;
    background: green;
    width:100%;
    min-width: 940px; /*&lt;-- this fixed footer width issue*/
  } 
  </code></pre>