iOS Safari如何触发横屏全屏显示效果？

你观察到的横屏全屏效果并非使用标准Fullscreen API实现，而是利用iOS Safari的自带特性组合实现，具体方案如下：

1. 配置必要元标签 #

<!-- 基础viewport设置，禁止缩放，适配刘海屏 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<!-- 声明网站支持以独立Web App模式运行 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏样式，全屏时状态栏会设为透明 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

2. 基础样式重置 #

确保页面没有多余边距，不会触发滚动条：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

3. 横屏状态适配处理 #

• 监听设备方向变化事件，横屏时主动调整页面尺寸适配视口：

// 监听屏幕方向变化
window.addEventListener('orientationchange', () => {
  // iOS下横屏时orientation值为90或-90
  if (window.orientation === 90 || window.orientation === -90) {
    // 强制重绘页面，确保内容占满整个视口
    document.body.style.height = '100vh';
    window.scrollTo(0, 0);
  }
})

• 可通过CSS媒体查询实现竖屏时的旋转提示：

/* 竖屏时显示提示遮罩 */
@media screen and (orientation: portrait) {
  .rotate-tip {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    color: #fff;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .content {
    display: none;
  }
}
/* 横屏时隐藏提示，显示内容 */
@media screen and (orientation: landscape) {
  .rotate-tip {
    display: none;
  }
  .content {
    display: block;
    width: 100vw;
    height: 100vh;
  }
}

注意事项 #

• 该效果仅在用户主动旋转设备到横屏时触发，无法通过JS强制切换设备方向触发
• 必须保证横屏时页面没有垂直滚动条，否则Safari不会自动隐藏地址栏和底部工具栏
• iOS 13及以上系统版本对该特性支持稳定，更低版本可能存在适配问题

内容的提问来源于stack exchange，提问作者ubershmekel