html - 基于 min-width/max-width 的条件 CSS 在 Apple 平板电脑上被忽略

Question

我有一些基于 @media 的条件 CSS，其中指定了最小宽度和最大宽度，用于 iPad 平板电脑设备。此条件 CSS 处理一个 div 标签，该标签应该覆盖标题元素下方的图像 slider 。这在 PC 上运行良好，但平板电脑上的 div 标签位于标题下方和图像 slider 上方，您必须向下拖动浏览器窗 Eloquent 能查看 div，当您释放拖动时，它会弹回隐藏在标题下。

这是下面的 CSS，我已经将平板电脑屏幕中的最小/最大值以及顶部:元素更改为不同的值，但没有成功。我做错了什么？

    @media (min-width: 801px) {
#searchIt {
    position:absolute; 
    top: 25px; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
    }
}

@media only screen 
     (max-device-width: 800px) 
  and (orientation: portrait) { 

  #searchIt {
    position:absolute; 
    top: 250px !important; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
      }

}

/* Landscape */
@media only screen  
     (max-device-width: 800px) 
  and (orientation: landscape) { 

  #searchIt {
    position:absolute; 
    top: 250px !important; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
      }

}

Answer 1

Try this way 
iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPad in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3 & 4 Media Queries

If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries.
Retina iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1 & 2 Media Queries

If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
iPad 1 & 2 in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

iPad 1 & 2 in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

iPad 1 & 2 in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }