Menu
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; } 
278
Mobile devices Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
Grid system. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Bootstrap uses CSS media queries to establish these Responsive Breakpoints. They enable you to control Column behavior at different screen widths. The col-sm-6 means use 6 of 12 columns wide (50%), on a typical small device width (greater than or equal to 768 px):
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
