iPad 的媒体查询

Question

我一直在 Browserstack 上测试媒体查询，我需要对 iPad 的页面布局进行特定更改。我可以让媒体查询在网站的桌面版本上工作，但我无法让媒体查询在所有 iPad 上工作。以下媒体查询有效，但仅适用于 Browserstack 称为 iPad 3rd(7) 的最新 iPad 版本。我一直在参考这个网站进行媒体查询。 http://code-tricks.com/css-media-queries-for-common-devices/

第一个是我唯一成功的，但仅适用于 iPad3，其他 iPad 版本均无效。

 @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio: 2){
       h1.iPadThis {color:black;}          
    }    

这应该适用于所有 ipad 版本，但仅适用于 iPad 3

  @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
       h1.iPadThis {color:orange;} 
   }

我已经为 iPad 1 和 2 尝试了以下方法，但它在 Browserstack 上不起作用。

  @media only screen 
      and (min-device-width : 768px) 
      and (max-device-width : 1024px) 
      and (orientation : portrait) 
      and (-webkit-min-device-pixel-ratio: 1){
         h1.iPadThis {color:orange;}              
     }

我脑子里有这个

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

谁能告诉我我在这里做错了什么？ 谢谢。

Answer 1

你也试试这个：

@media (min-width:600px) and (max-width:767px) {


h1.iPadThis {color:orange;}  

}

或

@media (max-width:767px) {


    h1.iPadThis {color:orange;}  

    }