ios - 仅 Retina 平板电脑和 iPad 媒体查询

Question

我断断续续地为此工作了大约一个星期。我将以下媒体查询放入我的代码中，它也在我的 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

}

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

       }

}