横向 CSS 上的方向锁定答案

【问题标题】：Orientation Lock on Landscape CSS横向 CSS 上的方向锁定
【发布时间】：2020-08-21 14:33:07
【问题描述】：

我有一个要锁定在移动视口上的 html 列表，基本上是 min-width: 320px 和 max-width: 767px。

我在这里使用了这段代码：

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    .piano-container {
        max-width: 72vw;
        transform: rotate(-90deg);
        transform-origin: left top;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
  }

但是这并没有锁定视图并且在移动设备上看起来不太好。

这是一个 js-fiddle：https://jsfiddle.net/b3mqehan/

【问题讨论】：

我不确定你想要在这里实现的目标是否可行 - 基于MDN docs 我认为如果你的设备/浏览器中没有可用/设置的方向，那么你可以不要通过 CSS “强制”它。编辑：我发现它虽然可以通过其他方法实现 - 解释in this SO thread

标签： html css

【解决方案1】：

在横向和纵向方向上，min-width 和 max-width 是不同的。您是否尝试过删除最小和最大宽度？

    @media (orientation: landscape) {
       .piano-container {
          max-width: 72vw;
          transform: rotate(-90deg);
          transform-origin: left top;
          overflow-x: hidden;
          position: absolute;
          top: 100%;
          left: 0;
       }
    }

【讨论】：