Html 基于最小宽度/最大宽度的条件CSS在Apple平板电脑上被忽略

我有一些基于@media的有条件CSS，指定了最小宽度和最大宽度，用于iPad平板电脑设备。这个有条件的CSS处理一个div标记，该标记应该覆盖头元素下面的图像滑块。这在PC上运行良好，但平板电脑上的div标记位于标题下方和图像滑块上方，您必须向下拖动浏览器窗口才能查看div，当您松开拖动时，它会捕捉回标题下方的隐藏位置

这是下面的CSS，我已经将min/max值更改为不同的值，以及tablet屏幕中的top:元素，但没有运气。我做错了什么

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

}

---

如果您使用的是视网膜iPad3，iPad4的分辨率为2048x1536px

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 */ }