媒體查詢不適用於Ipad

Question

我是使用媒體查詢的新手。 我正在一個網站上工作，我希望它能在iPad上正確顯示。

I have tried this, 

//css use for Ipad 

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) { 
     .overlayBox{ 
      width:200px; 
     } 
    } 


// css use for Window 
    .overlayBox{ 
     width:450px; 
    } 

但我有問題，媒體查詢不適用於Ipad。它需要窗口CSS。 我做錯了什麼？

Answer 1

使用device-width和device-height來定位特定設備，然後使用orientation來定位縱向或橫向。

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { 
    .myrules { 
     width: 200px; 
    } 
}