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*/ 
} 

Answer 1

我们使用JavaScript来做到这一点，以类似的方式，以这样的：

Can js/jQuery determine the orientation of the iPhone?

Answer 2

是。按照MDN docs：

方向

价值：景观|肖像

媒体：视觉

接受最小/最大前缀：无

表示视口是否是横向（显示较宽 大于高度）或纵向（在显示比它宽） 模式。

例

要仅在纵向应用样式表：

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

注：此值不 不对应于实际设备取向。在大多数设备上纵向打开软键盘 将导致视口到 变得比它高，因此导致浏览器使用横向样式而不是纵向。