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

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

@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;
  }
}
评论
killo
killo

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

因此,请查看您的html标记,我认为您应该在body元素中包含该类,这是最常见的方式。

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

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

Take a look: https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

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

var screenOrientation = window.screen.orientation;

screenOrientation.lock("portrait");

You could put this inside <script> </script> in your footer.php.

点赞
评论