CSS3：检测 iPhone 的设备方向答案

【问题标题】：CSS3: Detecting device orientation for iPhoneCSS3：检测 iPhone 的设备方向
【发布时间】：2011-04-16 21:22:46
【问题描述】：

所以这个声明适用于 iOS 4 和 4.1，但不适用于旧版本。有什么建议吗？

@media screen and (device-width:320px) and (orientation:portrait) {
    /* iPhone Portrait Styles Here*/
}

@media screen and (device-width:320px) and (orientation:landscape) {
    /* iPhone Landscape Styles Here*/
}

【问题讨论】：

标签： iphone css

【解决方案1】：

是的。根据MDN docs：

方向

值：风景 |肖像

媒体：视觉

接受最小/最大前缀：否

表示视口是否为横向（显示更宽比它高）或纵向（显示器比它高）模式。

示例

仅在纵向应用样式表：

@media all and (orientation: portrait) { ... }

注意：这个值确实与实际设备方向不对应。打开软键盘在大多数纵向设备上会导致视口变得比高度更宽，从而导致浏览器使用横向样式而不是纵向样式。

【讨论】：

【解决方案2】：

我们使用 javascript 来执行此操作，方式与此类似：

Can js/jQuery determine the orientation of the iPhone?

【讨论】：