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

是。根据{{​​3}}：

  

<强>取向

     

价值：风景|肖像

     

媒体：视觉

     

接受最小/最大前缀：否

     

指示视口是否为横向（显示范围更宽）   比它高）或肖像（显示器比它宽）   模式。

     

示例

     

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

     

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

     

注意：此值有效   不符合实际的设备方向。打开软键盘   在纵向方向的大多数设备上将导致视口   变得比它高，从而导致浏览器使用   风景而不是肖像。

Answer 2

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

Can js/jQuery determine the orientation of the iPhone?