Javascript 如何限制网站的横向模式

我有我的网站，想防止景观模式。我想让用户限制在potrait模式，因为我有自定义的标题，在固定位置使用大约100px的屏幕空间

此外，我希望这适用于屏幕宽度低于777px的设备

---

伙计们，请让我知道这是否可能，如果是，那么如何。当我使用用于将此标记为重复的代码时，我会遇到屏幕截图中的问题。

使用css媒体查询显示一个标志以打开设备：

#turn {
  display: none;
  z-index: 100;
  position: fixed;
}

@media (orientation: landscape) {
  #turn {
    display:block;
  }
}

<div id="turn">
  Please turn your device
</div>

#转动{
显示：无；
z指数：100；
位置：固定；
}
@媒体（方向：景观）{
#转向{
显示：块；
}
}
请打开你的设备

如果愿意，可以使用javascript解决此问题。 出于测试目的，您可以将以下代码添加到页面：

window.onresize = function (event) {
    console.log('resizing!');
    console.log(`new size: w${window.innerWidth} h${window.innerHeight}`);
    if(window.innerWidth < 777) {
        // do something
    }
    if(window.innerWidth > window.innerHeight) {
        // do something
    }
}

window.onresize=函数（事件）{
console.log（'resizing！'）；
log（`new size:w${window.innerWidth}h${window.innerHeight}`）；
如果（窗内宽度<777）{
//做点什么
}
if（window.innerWidth>window.innerHeight）{
//做点什么
}
}

---

window.innerWidth

和

window.innerHeight

返回的值是一个数字，因此您可以使用它进行计算。

我想您可以尝试以下方法：

@media (orientation: landscape) and (max-width: 777px) {
  html {
    transform: rotateZ(90deg);
  }
}

---

但是显示一条要轮换的消息会更方便用户。有些人发现很难使用纵向模式。

我想限制用户使用横向模式，并且仅限于potrait模式。如果我当时想展示这个信息，我本可以早一点做的。@Abhishek Dhanraj Shahdeo:我现在没有更好的方法了，我想给你展示一个可能的解决方法谢谢你的朋友，但我要找的是不同的东西。如果您遇到任何解决方案，请务必让我知道。显示消息说他们需要使用肖像模式是实现您的目标的最佳方式。@AbhishekDhanrajShahdeo-您没有很好地定义您的问题。为什么要限制用户选择其界面？你无法阻止他们将手机切换到横向模式。这是iPhone/Safari内部的一种内部硬件/软件配置，支持接口方向。作为开发人员，您的工作是为所有可能的案例提供可访问性。如果您不想提供这种可访问性，那么用户将学习按照您的意愿使用网站，否则他们将根本不使用网站。这不是调整大小，而是用户在具有横向模式的设备中打开网站。这需要加以限制。