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

Question

我有一些基于 @media 的条件 CSS，指定了 min-width 和 max-width 来说明 iPad 平板设备。这个条件 CSS 处理一个 div 标签，该标签应该覆盖在标题元素下方的图像滑块。这在 PC 上运行良好，但平板电脑上的 div 标签位于标题下方和图像滑块上方，您必须向下拖动浏览器窗口才能查看 div，当您释放拖动时，它会弹回隐藏在标题下。

这是下面的 CSS，我已经将最小/最大值更改为不同的值以及 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;
      }

}

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