Simple Bootstrap page is not responsive on the iPhone
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;
}
Answer
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.