css - 媒体查询不适用于 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;
    }
}