纯CSS代码可以检测任何版本的iPad纵向和横向

Question

我的代码有助于仅为iPad过滤掉CSS。它的分辨率为1024x768。

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

}
@media all and (device-width: 1024px) and (device-height:768px) and (orientation:landscape) {

}

我想问一下这段代码是否适用于iPad 1-4，iPad Mini，iPad Air等所有iPad版本。

如果没有，我需要纯CSS代码，以纵向和横向模式检测所有可能版本的iPad。另外，请确保该代码适用于带有Retina Display的iPad 1-2和iPad。

Answer 1

以下是带有Retina显示屏的iPad和iPad的有用CSS媒体查询。

纵向和iPad的iPad景观

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

风景中的iPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

Retina iPad的肖像

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1＆amp; 2纵向＆amp;景观

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

iPad 1＆amp; 2景观

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

iPad 1＆amp; 2纵向

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

参考：http://stephen.io/mediaqueries/