CSS3：检测iPhone设备方向

Question

所以这个声明可以在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*/
}

- E-Madd

Answer 1

是的，根据MDN文档的说法：

方向

值：landscape | portrait

媒体：视觉

接受min/max前缀：否

指示视口是否处于横向（显示器宽度大于高度）或纵向（显示器高度大于宽度）模式。

例如

仅在纵向方向应用样式表：

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

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

- Blazemonger

Answer 2

我们使用JavaScript来完成这个任务，类似于这样的方式： JavaScript/jQuery能够确定iPhone的方向吗？

- Oren Mazor