Javascript 强制网站仅以横向模式显示

我只想以横向模式显示我的网站，可能吗？无论用户手中设备的方向如何，网站都将始终处于横向模式。我见过iPhone应用程序是这样工作的，但这能为网站做到吗？

当我自己在这里等待答案时，我想知道是否可以通过CSS实现：

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

@戈马尔真的回答了这个问题，我只是说得有点冗长。

#警告消息{显示：无；}
@仅媒体屏幕和（方向：纵向）{
#包装{显示：无；}
#警告消息{display:block；}
}
@仅媒体屏幕和（方向：横向）{
#警告消息{显示：无；}
}
....
此网站只能在横向模式下查看

您无法控制用户移动方向，但至少可以向他们发送消息。此示例将在纵向模式下隐藏包装并显示警告消息，然后在横向模式下隐藏警告消息并显示纵向

我不认为这个答案比@Golmaal更好，只是对它的一种恭维。如果你喜欢这个答案，一定要给@Golmaal评分

更新

我最近一直在与Cordova合作，结果证明，当您能够访问本机功能时，您可以控制它

另一次更新

---

所以在释放科尔多瓦之后，最终真的很糟糕。如果需要JavaScript，最好使用React Native之类的东西。这真是太棒了，我知道这不是纯网络，但移动设备上的纯网络体验有点失败。

试试这个，它可能更适合你

#容器{display:block；}
@仅媒体屏幕和（方向：纵向）{
#容器{
高度：100vw；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
}
}
@仅媒体屏幕和（方向：横向）{
#容器{
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
-ms变换：旋转（0度）；
变换：旋转（0度）；
}
}

此文本始终处于横向模式

我不得不调整主容器的宽度：

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}

---

问得好，但我敢打赌答案是“不可能”，尽管你可能会有点作弊。你可以用css变换来伪装它，但它很难看，而且我认为没有办法知道它在android上是否颠倒了。很确定这已经在这里讨论过了。有可能强制网站的最小宽度为：320px吗？所以，如果屏幕尺寸是较低的分辨率，用户将需要滚动查看完整的网站。或者我可以将240px的宽度缩放到320px的内容吗？我不确定这个链接对您有多大帮助，但最新的[2020年1月]功能建议使用W3C智能的新方向锁定API，但实际上不起作用。当页面旋转时，大部分页面无法访问，因为只有内容旋转，而不是实际的浏览器。这会破坏任何动画，可能会破坏页面的移动响应。让我开心！这是一个非常方便的脚本，它可以在小型设备上强制使用横向模式，从而发出一条很好的消息。不过，您获得了大部分荣誉；）+1d感谢您描述良好的答案和@Golmaal..非常有用，谢谢！值得注意的是，如果你把它放在一个单独的样式表中，它似乎不起作用。你的答案比你引用的答案要好。您提供了一个实际的解决方案，并推荐一个易于实现的警告，而不是一些更具创造性和问题性的警告。另一个“答案”可能会激励你，但它或多或少只是大声地思考。如果有评论提到

orientation

条件组属性的存在，那就更好了。好主意。。在纵向/横向之间切换时是否存在任何瑕疵/噪音？

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}