web 端能强制横屏吗？

Question

我有个问题，困扰我好多年了。web 端能强制横屏嘛？比如说像王者荣耀那种，不管手机是横屏还是竖屏，都强制横屏。

我之前做的大概就是检测，然后写了两种样式来适配。但是感觉好累啊。

这都 2022 年了，有没有什么框架或者牛逼的东西能实现？

我多年前的问题，现在还一直存在 移动端有什么方案可以解决横竖屏幕的问题？

Answer 1

全屏模式下有 screen.orientation.lock() 方法可以锁定横竖屏；非全屏模式下好像还真没有什么特别好的办法（可以先 requestFullscreen() 一下 2333333...）。

这个需求在 HTML5 游戏里比较常见，有些游戏就只有横板或者只有竖版，不过一般都是在引擎层直接就处理了，业务层面上按设计稿做就可以了、无需考虑横竖屏问题。不同引擎的处理方式可能不太一样，比如 Cocos2D、Laya 这种底层都是监听事件 + Canvas Transform（主要是 scale），因为游戏引擎本来就需要考虑适配不同尺寸、宽高比的设备屏幕，而所谓横竖屏切换其实就是缩放到某种特殊的尺寸屏幕。这种有点儿类似小程序里你单位写 rpx、然后由小程序自己换算成实际尺寸的那个意思。

但非游戏场景下貌似还真没有通用解决方案，起码我没听过见过。一般都是结合业务需求自己手撸了。可能因为随着屏幕尺寸越来越大、非游戏场景下需要强制横屏的场景本来就很有限吧，大部分时候适配响应式布局就足够了 😂

Answer 2

监听 横竖屏 事件，
如果是竖屏，将整个页面 transform:rotate(90deg)
最外层的 DIV 用 width:100vmax

Answer 3

@media screen and (orientation: portrait) {
  .app {
    position: absolute;
    width: 100vh;
    height: 100vw;
    top: 0;
    left: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
  }
}

我遇到了这种情况当强制横屏时，点击弹窗显示，页面左右滚动的数据层级会高于弹窗，页面左右（上下）滚动的数据会显示在弹窗之上，