纯 CSS 代码来检测任何版本的 iPad 纵向和横向答案

【问题标题】：Pure CSS Code to detect any version of iPad both portrait and landscape纯 CSS 代码来检测任何版本的 iPad 纵向和横向
【发布时间】：2014-04-25 07:46:03
【问题描述】：

我有一些代码可以帮助过滤出仅适用于 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 版本，例如 iPad 1-4、iPad Mini、iPad Air。

如果没有，我需要纯 CSS 代码来检测 iPad 的所有可能版本，包括纵向和横向模式。还要确保代码适用于 iPad 1-2 和配备 Retina 显示屏的 iPad。

【问题讨论】：

stackoverflow.com/questions/3839809/… 或 stackoverflow.com/questions/11680095/… 的可能重复项？
请注意，您将无法检测到 iPad mini，因为它与任何其他 iPad 具有相同的分辨率。
相同的代码是否适用于 iPad 1-2 和配备 Retina 显示屏的 iPad？
我发现这个链接很有用stephen.io/mediaqueries

标签： css ipad responsive-design

【解决方案1】：

以下是适用于 iPad 和配备 Retina 显示屏的 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/

【讨论】：