Question

我有以下媒体查询...横向媒体查询始终优先。我尝试改变这些思维的顺序，如果肖像一个是第一个它将优先，但这不起作用。事实上，即使我完全删除了横向媒体查询并且只是离开了肖像它也不起作用，所以看起来肖像媒体查询被破坏了：S

以下是我的两个问题：

/* iPad Retina, landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 
#container {
 width: 995px !important;
}


#currentroom_convo {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
   overflow-x: hidden !important;
}

.slimScrollBar .ui-draggable {
   opacity: 0 !important;
 }

}


/* iPad Retina, portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)  { 

#container {
 width: 300px !important;
}



#currentroom_convo {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.slimScrollBar .ui-draggable {
   opacity: 0 !important;
 }

 div .topbar {
    max-width: 300px !important;
    }

}

我的标题中有这个元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, user-scalable=no">

请注意我使用！important，因为我需要覆盖第三方插件中的其他CSS。在横向查询中删除！important会导致#container元素无法更改（仍然无法获取纵向查询）。

我试过在这里搜索，但没有一个答案似乎对我有用。谢谢:)）

Answer 1

你的approch错了。请注意，当您将景观设备更改为肖像时，您的宽度将变为高度和宽度。高度变宽。在您的代码中，您不会相应地更改这些值。因此，根据您的情况，当屏幕宽度介于786px到1024px 之间时，应用 。我认为这个条件不满意，因为在拍摄模式下ipad重新分配宽度在标准时是786px。因此，你的风格永远不会被应用。

另请勿使用max-device-width＆amp; min-device-width＆amp; max-device-width使用min-width＆amp; max-width。这背后的结果是max-device-width为您提供了整个屏幕的宽度，但max-width给出了浏览器视口的实际宽度。

记住所有这些事情会将代码更改为以下内容：

/* iPad Retina, landscape*/ @media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ /* Styles */ } /* iPad Retina, portrait*/ @media only screen and (max-width:768px) and (orientation:portrait){ /* Styles */ }

@media查询在Portrait中不适用于iPad

1 个答案: