仅 Retina 平板电脑和 iPad 媒体查询答案

【问题标题】：Retina Tablets & iPad Only Media Query仅 Retina 平板电脑和 iPad 媒体查询
【发布时间】：2014-01-24 05:59:55
【问题描述】：

我已经为此工作了大约一个星期。我将以下媒体查询放入我的代码中，它也可以在我的 iPhone 5s 上运行。我只希望它只在 Retina 平板电脑和 iPad 上工作

@media only screen and (min-device-width : 768px)
  and (max-device-width : 1024px),
  and (min-device-pixel-ratio: 2),
  and (-o-min-device-pixel-ratio: 2/1),
  and (-webkit-min-device-pixel-ratio: 2),
  and (min--moz-device-pixel-ratio: 2) {

      Retina iPad CSS Only

}

有人建议应该是这样，但我没有得到更好的结果......

@media only screen and (min-device-width : 1536px)
   and (max-device-width : 2048px),
   and (min-device-pixel-ratio: 2),
   and (-o-min-device-pixel-ratio: 2/1),
   and (-webkit-min-device-pixel-ratio: 2),
   and (min--moz-device-pixel-ratio: 2) {

      Retina iPad CSS Only

}

【问题讨论】：

标签： ios ipad css media-queries

【解决方案1】：

哇，在发布此内容并通过 Twitter 发送 SOS 后，我终于想通了……

我不得不分离媒体查询。不确定这是否是最好的方法，但它有效！

@media only screen and (min-device-pixel-ratio: 2),
    and (-o-min-device-pixel-ratio: 2/1),
    and (-webkit-min-device-pixel-ratio: 2),
    and (min--moz-device-pixel-ratio: 2) {

       @media (min-device-width : 768px) and (max-device-width : 1024px) {

           Retina iPad CSS Only

       }

}

【讨论】：