时间戳

首页 > 解决方案 > 浏览器支持方向（纵向和横向）

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

问题描述

浏览器对以下内容的支持是什么？

用于检测屏幕方向的 CSS：

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

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

从如何使用 CSS 媒体查询检测设备方向？

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

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

标签： cssmedia-queries

解决方案

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

此示例使用 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>

推荐阅读