这篇翻译不完整。请帮忙从英语翻译这篇文章

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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
orientation media featureChrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

文档标签和贡献者

标签: 
此页面的贡献者: mdnwebdocs-bot, RainSlide
最后编辑者: mdnwebdocs-bot,