orientation

CSS 媒体属性屏幕方向orientation)可用于测试视口 viewport (or the page box, for paged media) 的屏幕横纵方向。

注意:此属性与设备屏幕方向不相对应。在许多设备上,当屏幕方向为纵向时,打开软键盘将导致视口 viewport 的宽度大于高度,从而导致浏览器突然改用横向样式,而不是保持纵向。

语法

orientation 属性被指定为下列关键字值中的任意一个。

关键值

portrait
viewport 处于纵向,即高度大于等于宽度。
landscape
viewport 处于横向,即宽度大于高度。

例子

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Result

规范

规范 状态 备注
Media Queries Level 4
orientation
Candidate Recommendation No change.
Media Queries
orientation
Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
orientation media featureChrome Full support 3Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 4.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 4.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support