@media 查询不适用于纵向 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">

请注意，我正在使用 !important，因为我需要覆盖来自第三方插件的其他一些 CSS。在横向查询中删除 !important 不会导致 #container 元素发生任何变化（甚至仍然不会选择纵向查询）。

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

Answer 1

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

也不要使用max-device-width & min-device-width & max-device-width 而应使用min-width & 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 */
}