更改特定WordPress页面的页面方向

Question

我想将移动设备上特定页面的方向更改为横向。这是我的代码，无法正常工作。怎么了

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  .page-id-1294 #change_orien html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

Answer 1

在CSS代码中，您正在寻找一个带有id的类，其中包含html元素。我认为这不是您的html标记所显示的样子。您需要获取html / body标签的类或ID，并且只能在CSS中定位。

所以请看一下您的html标记，我认为您应该在body元素中包含该类，这是最常见的方式。

.page-id-1294 { /* your styles */ }

---

或者，也可以使用javascript锁定页面方向。这样，您就不需要通过css向后旋转页面。

看看：https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

在javascript中，您可以获取当前方向并将其保存到变量中。然后您可以将其锁定：

var screenOrientation = window.screen.orientation;

screenOrientation.lock("portrait");

您可以将其放在footer.php中的<script> </script>中。