Menu
I am designing my site (danielrojas.net) with Bootstrap and have created a separate layout for the XS viewports. It works beautifully when I resize my desktop browser (Chrome) and when I try it on Responsinator.com or similar.
However, on my actual Android phone and tablet (both using Chrome, tested using the built-in browser as well), the standard version is shown, no matter what. I have included the magic viewport META tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
To no avail. I am using a customized Bootstrap CSS, but even loading the official one, the same error remains.
Other sites (e.g. getbootstrap.com) work fine on both devices. What am I missing?
Thanks in advance!
547
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 is built on responsive 12-column grids, layouts, and components.
Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
You are right that you have included <meta> tag. But it is in the frame.
By inspecting your code, Its not there in the main <head>. So Include it in that part also.
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm also not sure, responsive will work on iframe, You should avoid using iframe if its not working.
135
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
