Simple Bootstrap page is not responsive on the iPhone
Twitter BootstrapResponsive DesignTwitter Bootstrap Problem Overview
I downloaded Twitter Bootstrap example and create a simple rails project with it. I copied the css where needed and it displays fine. I also copied the js and everything works great on my desktop: it reorganizes the page when I change the size of my browser. When using some "responsive design testing tools" with different sizes, it works great.
The problem I have is on my iPhone: it displays juste like on my desktop.
When I try the Bootstrap Hero Example page (which is the one I started from), it works great on my iPhone.
What could go wrong? I have pretty much not touched to any CSS, I just added a padding on the footer.
FYI, the CSS I changed is that I am linking my app to application.css with the following content:
/* Application stylesheet */
@import url(bootstrap.css);
@import url(bootstrap-responsive.css);
/* Body */
body {
padding-top: 60px;
padding-bottom: 40px;
}
/* Footer */
footer {
padding: 20px 0;
}
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
Make sure you add:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to your <head>.
I had a similar problem and I mistakenly thought it was just a matter of viewport width.
Update: check out @NicolasBADIA answer for a more complete version.
Solution 2 - Twitter Bootstrap
The code proposed by frntk doesn't work when you turn the device in landscape view, and the solution given by virtualeyes is incorrect because it uses semicolon instead of commas. Here is the correct code :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Source: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Solution 3 - Twitter Bootstrap
Granted, a very small edge case, but worth mentioning.
If you're using domain forwarding via your DNS Provider your site may end up wrapped in an iframe. GoDaddy, for example, use this technique if you're masking your domain and forwarding.
Solution 4 - Twitter Bootstrap
I was stuck on this problem for several hours.
Don't forget to also place the content inside a <div class="container-fluid">...</div>