Simple Bootstrap page is not responsive on the iPhone

StackOverflow https://stackoverflow.com/questions/9386429

문제

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;
}
도움이 되었습니까?

해결책

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.

다른 팁

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

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.

I was stuck on this problem for several hours.

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top