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;} }

媒体查询iPad

1 个答案:

或