I use twitter bootstrap as my CSS template.
My responsive design works everywhere (android phone, android tablet, iphone, computer) besides on the IPad.
I included the viewport meta tag in the head
<meta name="viewport" content="width=device-width, initial-scale=1">
as described here: CSS Media Query max-width and ipad
I alert the viewport width:
$(document).ready(function(){
alert($(window).width());
});
And it gives me: 768 in Portrait and 1024 in landscape for the ipad.
I target the css in my media queries with:
@media screen and (max-width: 768px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
like described here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Which also seems to work.
But the bootstrap columns don't go with the IPad. E.g.
col-xs-12 col-sm-6
stays in the medium view. But according to the documentation $screen-sm: 768px !default; it should break at 768px.
The workaround I did is so far:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
div.container>div.row>div {
width:100%;
margin-right: 0;
margin-left: 0;
}
... and a lot more resets ...
}
I found this but it is from 2012: https://github.com/twbs/bootstrap/issues/2155
Question: Why does it behave like that and is there a good way to solve it with css? I think the one I used is not very practical. Or is the only way to use sass/less and redefine the vars?
