Simple Bootstrap page is not responsive on the iPhone

Question

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

It is responsive for me. Why do you think it is not responsive? — Jesse Wolgamott, Feb 22 '12 at 01:36
@RaySF i can't see the cause of why it should not work, though i do have some qualms over the `@import` rule you are using but thats personal. Can you post a test case? — Andres Ilich, Feb 22 '12 at 02:44
@JesseWolgamott it is not responsive on my iphone, when I open the two pages mentioned above, the official examples works fine (ie. the menu is not displayed the same for instance) but my page is displayed just like on a desktop. — RaySF, Feb 22 '12 at 06:11
@RaySF Due to the nature of my job i've had to research ways to increase compatibility and raise performance of very large stylesheets that were stacked using the `@import` notation method. Along the way i found many issues were had due to that technique and found that there was a biiig performance hit (and also lots of errors that could not be explained) that were later fixed by appending the stylesheets by using the html `` tag. Doubts that were later supported by questions such as [this](http://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css) here in SO. — Andres Ilich, Feb 22 '12 at 13:10
@RaySF But all in all, personal bias, it has always stood that "if it works, it works" and the method works, its just one that i don't use because of all the research that i've done that have put me against it. Personal opinion in the end. — Andres Ilich, Feb 22 '12 at 13:11

Víctor López García · Accepted Answer · 2012-05-09T23:14:47.230

188

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.

edited May 09 '12 at 23:14

answered Feb 23 '12 at 04:37

Víctor López García

1,851
1
12
17

8

and this, to get both portrait and landscape views working: – virtualeyes Mar 04 '12 at 09:27
@virtualeyes, thanks for the tip! any idea how to allow user scaling and get lanscape view working properly? – Andrei Apr 10 '12 at 09:47
Nope, I use JQuery mobile, not a big believer in responsive design. Let the mobile be mobile, and tablets and up, desktop. Anything in between, don't care ;-) – virtualeyes Apr 10 '12 at 10:20

score 112 · Answer 2 · edited May 12 '15 at 01:05

112

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

edited May 12 '15 at 01:05

Community

1
1

answered Apr 12 '12 at 09:23

Nicolas BADIA

5,065
6
39
45

4

The examples in Twitter Bootstrap official site should be updated to use this. – wenbert Jun 24 '12 at 21:13
1

Great notice, thanks! Had similar problem with screen turn, now works like a charm. – Mark Vital Oct 11 '12 at 09:32
8

This should be the Accepted Answer! – Sheharyar Dec 07 '13 at 17:49

score 6 · Answer 3 · answered Jul 16 '16 at 00:04

6

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.

answered Jul 16 '16 at 00:04

nullable

2,133
1
24
29

2

I spent hours trying to solve this issue and eventually came across this comment. Thank you! – Ed Shee Nov 28 '16 at 15:44
This comment will make a tiny group of people very very happy. – Nicolas Rojo Jul 07 '17 at 18:59
I don't see an iframe wrapped around, but having that problem with the right meta tags, can they hide the iframe anyhow? – helle Feb 06 '18 at 08:49

score 3 · Answer 4 · answered Jan 03 '16 at 23:34

3

I was stuck on this problem for several hours.

Don't forget to also place the content inside a <div class="container-fluid">...</div>

answered Jan 03 '16 at 23:34

dpigera

3,281
4
33
56

Simple Bootstrap page is not responsive on the iPhone

4 Answers4

Linked

Related