Twitter-bootstrap – Simple Bootstrap page is not responsive on the iPhone

responsive-designtwitter-bootstrap

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;
}

Best 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.

Related Topic