@媒体查询不适用于Portrait中的iPad

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">

请注意，我正在使用！重要的是，我需要从第三方插件覆盖一些其他CSS。正在删除！重要的横向查询不会导致#container元素发生更改（甚至仍然不会接受Portrait查询）。

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

Answer 1

您的方法是错误的。请注意，当您将设备方向从横向更改为portait时，您的宽度将变为高度&高度变为宽度。在代码中，您不会相应地更改这些值。因此，根据您的条件，当屏幕宽度在786px到1024px之间时，门户样式应用。我认为这个条件不满足，因为在门户模式下，ipad的分辨率宽度标准为786px。因此，你的风格永远不会被应用。

也不要使用max-device-width&CCD_ 2&CCD_ 3使用CCD_；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 */
}