Media Queries: orientation

语法：

orientation：portrait | landscape

接受min/max前缀：否

取值：

portrait：
竖屏，指定输出设备中的页面可见区域高度大于或等于宽度
landscape：
横屏，除portrait值情况外，都是landscape

说明：

定义输出设备中的页面可见区域高度是否大于或等于宽度。可用于检测设备是横屏还是竖屏
  • 本特性不接受min和max前缀。

    简单列举几个应用示例：

    @media screen and (orientation: portrait){ … } @import url(example.css) screen and (orientation: landscape);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 橙色 = 通过第三方工具支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-8 12+ 2-3 4-25 #1 3.1-3.2 #1 9 3.2-6.1 #1 2.1-4.3 #1 7+ 10+ 61 56 10-11 #1 11.4 4+ 1.2 7.12
9-11 #1 3.5+ 26+ 4-6 #1 9.5+ 7.0+ 4.4+
6.1+
  1. 不支持嵌套媒体查询。

示例：