Firefox Android v110.1.0如何实现页面横屏？ScreenOrientation.lock已失效但YouTube可行

关于YouTube的横屏实现 #

Firefox for Android确实对YouTube这类顶级站点做了特殊处理。为保证主流服务的用户体验，浏览器厂商会针对少数核心站点开放私有权限或内部API，允许它们绕过公开API的限制实现全屏横屏逻辑——这是行业内的常见操作，普通站点无法直接复用这种特权。

替代实现方案 #

1. CSS视觉模拟横屏 #

通过CSS变换强制将页面转为横屏样式，虽然不是系统级的物理旋转，但能实现视觉上的横屏效果：

/* 横屏样式类 */
.force-landscape {
  transform: rotate(90deg);
  transform-origin: top left;
  width: 100vh;
  height: 100vw;
  position: fixed;
  top: 100%;
  left: 0;
  overflow: auto;
}

配合全屏API使用，进入全屏后给页面根元素添加这个类：

async function enterFullscreenAndRotate() {
  const elem = document.documentElement;
  try {
    await elem.requestFullscreen();
    elem.classList.add('force-landscape');
  } catch (err) {
    console.error('全屏或旋转失败:', err);
  }
}

缺点是系统状态栏方向不会改变，部分交互元素的触摸位置可能需要额外适配。

2. 引导用户手动旋转设备 #

提示用户开启系统的「自动旋转」功能，进入全屏模式后，页面通过媒体查询适配横屏布局：

/* 横屏布局适配 */
@media (orientation: landscape) {
  .container {
    flex-direction: row;
    /* 其他横屏专属样式规则 */
  }
}

这种方案依赖用户操作，但能获得最原生的系统级横屏体验，适合大多数场景。

3. 慎用私有API（不推荐生产环境） #

Firefox曾有mozLockOrientation这类私有API，虽然公开的lock接口被禁用，但部分旧私有接口可能仍在特定版本生效。不过这类接口没有官方文档，随时可能被移除，稳定性无法保证，仅适合测试场景。

内容的提问来源于stack exchange，提问作者proto-n