Best IT Recipes

Simple Bootstrap Page Not Responding to iPhone

I downloaded the Twitter Bootstrap example and created a simple rails project with it. I copied css where necessary, and it displays everything. I also copied js and everything works fine on my desktop: it reorganizes the page when I resize my browser. When using some “flexible design testing tools” with different sizes, it works great.

I have a problem on my iPhone: it displays juste like on my desktop.

When I try to execute the Bootstrap Hero sample page (with which I started), it works fine on my iPhone.

What could go wrong? I almost did not touch any CSS, I just added the registration on the footer.

FYI, the CSS I changed is that I bind my application to application.css with the following contents:

 /* Application stylesheet */ @import url(bootstrap.css); @import url(bootstrap-responsive.css); /* Body */ body { padding-top: 60px; padding-bottom: 40px; } /* Footer */ footer { padding: 20px 0; }
+73
twitter-bootstrap responsive-design
Feb 21 '12 at 22:37
source share
5 answers

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: exit @NicolasBADIA answer for a more complete version.

+156
Feb 23 2018-12-12T00:
source share

The code suggested by frntk does not work when you rotate the device in landscape mode, and the solution given by virtualeyes is incorrect, because a semicolon is used instead of a semicolon. 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

+102
Apr 12 2018-12-12T00:
source share

Of course, a very small edge, but worth mentioning.

If you use domain forwarding through your DNS provider, your site may be terminated in an iframe. GoDaddy, for example, uses this technique if you mask your domain and redirect.

+5
Jul 16 '16 at 0:04
source share

I am stuck in this problem for several hours.

Remember to also place the content inside the <div class="container-fluid">...</div>

+2
Jan 03 '15 at 23:34
source share

add to your title it responds perfectly to any device, make sure to add, which is used for full width, adjust the sensitivity

-3
Jun 01 '16 at 12:14
source share


More articles:


All Articles