Retina平板电脑＆amp; iPad Only媒体查询

Question

我一直在研究这项工作一周左右。我在我的代码中添加了以下媒体查询，它也可以在我的iPhone 5s上运行。我只想让它适用于Retina Tablets＆amp; iPad Only

@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

}

Answer 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

       }

}