纯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 Display的iPad和iPad的有用CSS媒体查询.

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和2的纵向和横向

@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和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和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/