視網膜平板電腦和iPad只媒體查詢

Question

我一直在這工作了大約一個星期的開關。我把下面的媒體查詢放在我的代碼中，它也運行在我的iPhone 5s上。我只希望它在視網膜片& 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 

     } 

}