Question

我使用twitter bootstrap作为我的CSS模板。

除了iPad之外，我的响应式设计无处不在（Android手机，安卓平板电脑，iphone，电脑）。

我在头部

中包含了视口元标记

<meta name="viewport" content="width=device-width, initial-scale=1">

如下所述： CSS Media Query max-width and ipad

我提醒视口宽度：

$(document).ready(function(){
    alert($(window).width());
});

它给了我：适用于ipad的768 in Portrait和1024 in landscape。

我使用以下内容定位媒体查询中的css：

 @media screen and (max-width: 768px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

如下所述： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 这似乎也有效。

但是引导列并不适用于iPad。例如。

col-xs-12 col-sm-6

保持在中等视图中。但是根据文档$screen-sm: 768px !default;，它应该在768px时突破。

我做的解决方法到目前为止：

@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 ...
}

我发现了这个，但它是从2012年开始的： https://github.com/twbs/bootstrap/issues/2155

问题： 为什么它表现得那样，并且有一个好方法用css解决它？我认为我使用的那个不太实用。或者是使用sass / less并重新定义变量的唯一方法？

Bootstrap和Ipad Portrait

0 个答案: