所有移动设备（浏览器）的锁定屏幕方向

Question

我正在寻找一种在访问网站时将所有移动设备浏览器的屏幕方向锁定为横向的方法。搜索时我无法得到明确的结果，因为它总是为应用程序创建和锁定提供结果，而不是网站。

显然，这种“有点”（它确实会旋转整个网站，但会保持纵向模式的宽度）适用于 Android，但在 IOS 中根本不适用。即使在 android 中也不完美：

/* if portrait mode is detected, rotate the entire site -90 degrees to hint rotating to landscape */
@media (orientation: portrait) {
  body {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

Answer 1

您可以使用以下命令强制宽度：

@media (orientation: portrait) {
  body {
    width:100vh;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}