CODEWITHSUNDEEP
twitter-bootstrapresponsive-design
RaySF
RaySF

Reputation: 1319

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

Upvotes: 84

Views: 70350

Answers (4)

nullable
nullable

Reputation: 2571

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.

Upvotes: 6

dpigera
dpigera

Reputation: 3369

I was stuck on this problem for several hours.

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

Upvotes: 3

Nicolas BADIA
Nicolas BADIA

Reputation: 5852

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

Upvotes: 114

V&#237;ctor L&#243;pez Garc&#237;a
V&#237;ctor L&#243;pez Garc&#237;a

Reputation: 1881

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.

Upvotes: 191

Related Questions