CSS3：检测iPhone的设备方向 [英] CSS3: Detecting device orientation for iPhone

问题描述

所以这个声明适用于iOS 4和4.1，但不适用于旧版本。任何建议？

  @media screen and（device-width：320px）and（orientation：portrait）{
 / * iPhone的肖像风格这里* / 
} 
 
 @media屏幕和（设备宽度：320像素）和（方向：风景）{
 / * iPhone风景风格这里* 
} 
  

解决方案

根据 MDN文档：

方向

/ max prefixes：no

指示视口是否为横向（显示器宽度大于
，

>只能以纵向方式应用样式表：

@media all和（orientation：portrait）{...}

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

So this declaration works fine for iOS 4 and 4.1, but not for older versions. Any advice?

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

解决方案

Yes. According to the MDN docs:

orientation

Value: landscape | portrait

Media: visual

Accepts min/max prefixes: no

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

Example

To apply a style sheet only in portrait orientation:

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

Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

这篇关于CSS3：检测iPhone的设备方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！