浏览器支持方向（纵向和横向）

Question

以下浏览器支持是什么？

用于检测屏幕方向的CSS：

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

媒体查询的CSS定义位于http://www.w3.org/TR/css3-mediaqueries/#orientation

来自How to detect the device orientation using CSS media queries?

我看过可以使用吗？但它表示只支持48％的英国用户。那是对的吗？还是我看错了什么？我对Screen.orientation或任何花哨的东西都不感兴趣。我只想在视口高于宽视角时使用不同的样式。

编辑：我认为该方向是核心媒体查询的一部分，因此得到广泛支持（约98％），请参阅https://www.w3.org/TR/css3-mediaqueries/

Answer 1

根据MDN的说法，对orientation in media queries的支持看起来似乎很少。我建议不要将它们用于关键的响应性，但作为一个实验性的功能可能很方便。

桌面支持：

移动支持：

Answer 2

这是在窗口宽度不足时为横向，正方形和纵向布局设置样式表规则的另一种方法。

此示例使用7和8，因此当宽度和高度在彼此大小的1/8之内时，将应用“正方形”样式。当宽度和高度在彼此的1/10之内时，使用9和10将应用“正方形”样式。您必须使用不带小数的数字。

该代码段在全页视图中效果最佳。

div {
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
  }

  #instructions {
    display:block;
    top:25%;
  }


  @media (max-aspect-ratio: 8/7) and (min-aspect-ratio: 7/8) {
    /* rules for square-ish layout */
    #square {
      display:block;
    }
  }

  @media (min-aspect-ratio: 8/7) {
    /* rules for landscape layout */
    #landscape {
      display:block;
    }
  }


  @media (max-aspect-ratio: 7/8) {
    /* rules for portrait layout */
    #portrait {
      display:block;
    }
  }

<div id="portrait">
  Portrait
</div>
<div id="square">
  Square
</div>
<div id="landscape">
  Landscape
</div>
<div id="instructions">
  Resize your window to change the aspect and apply different style rules
</div>