Note that there are some explanatory texts on larger screens.

plurals
  1. POWeb page (made with twitter bootstrap) zoomed in on iphone, how to force it to fit iPhone screen?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload