更改特定 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

您可以通知用户他必须改变方向并隐藏屏幕。 然后感知方向变化并重新加载页面。

以下代码应放在页面模板的末尾或页脚中。

这将在用户旋转设备时重新加载隐藏页面。

jQuery(window).on("orientationchange",function(){
    location.reload();
});

这是为了通知用户他应该旋转设备，当页面处于纵向状态时它会隐藏内容。 您应该确认“.content”是您页面上的正确选择器。

if(screen.availHeight > screen.availWidth){
    jQuery( ".content" ).css( "display", "none" );
    var newLine = "\r\n"
    var msg = "Please use Landscape!"
    msg += newLine;
    msg += "(Turn your phone 90 degrees)";
    msg += newLine;
    msg += "and wait a second,";    
    msg += newLine;
    msg += "for the page to reload.";   
    alert(msg);
}

Answer 2

在您的 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");

你可以把这个放在 <script> </script> 你的 footer.php 中。