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

Solution 1:

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:

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

Simple Bootstrap page is not responsive on the iPhone

Solution 1:

Solution 2:

Related

Recent Posts