javascript - 所有移动设备(浏览器)的锁定屏幕方向

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);
  }
}