最小幅/最大幅に基づく条件付きCSSはAppleタブレットでは無視されます

Question

iPadタブレットデバイスを説明するために、min-widthとmax-widthで指定された@mediaに基づく条件付きCSSがあります。この条件付きCSSは、ヘッダー要素の下にイメージスライダーをオーバーレイするdivタグを処理します。これはPCでうまくいきますが、タブレットのdivタグはヘッダーの下にあり、画像スライダーの上にあるので、ブラウザウィンドウをドラッグして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 */ }