移动端H5横屏需精准设置viewport为device-height、锁定html/body尺寸并隐藏溢出，iOS Safari通过伪元素隐藏滚动条而非display:none，Android补充scrollbar-width:none，自定义滚动提示宜监听scroll事件动态绘制滑块，Canvas游戏需添加微溢出触发地址栏隐藏。
移动端 H5 横屏场景下，既要保证视口正确适配，又要隐藏或美化滚动条，本质是解决两个耦合问题：一是 Safari（尤其是 iOS）对横屏全屏的限制逻辑，二是滚动条在不同内核下的渲染差异。关键不在于“强行盖住”，而在于“让浏览器认为该滚、但不显示滚”。
视口配置必须精准匹配横屏逻辑
横屏游戏或应用常因 viewport 设置不当导致地址栏残留、缩放错乱或触发意外滚动。标准写法如下：
- 强制横屏视口宽度 = 设备高度：`` —— 注意不是 `device-width`，横屏时设备物理宽度实为屏幕高度值
- 配合 CSS 锁定 body 和 html 尺寸：
html, body { height: 100%; width: 100%; overflow: hidden; }，防止默认纵轴溢出引发 Safari 地址栏不隐藏 - 若需内容可滚动（如横屏列表），应明确限定容器尺寸并启用
overflow-x: auto或overflow-y: auto，而非依赖 body 滚动
iOS Safari 横屏下滚动条隐藏的核心方法
iOS Safari 不支持 ::-webkit-scrollbar 的 display:none 动态切换，且原生滚动条不可见也不可样式化。有效方案是“视觉隐藏 + 行为保留”：
- 对滚动容器设置：
overflow: auto; -webkit-overflow-scrolling: touch;（保障惯性滚动） - 用伪元素隐藏（仅对 WebKit 有效）：
.scroll-container::-webkit-scrollbar { width: 0; height: 0; }，注意不能写display: none（部分 iOS 版本失效） - Android 可补充：
scrollbar-width: none;（Firefox）和scrollbar-color: transparent transparent;（兼容旧版） - 终极兜底：外层包裹一个
overflow: hidden的父容器，将滚动条物理裁切掉，同时确保内部容器仍可响应 touchmove
需要自定义滚动条时的轻量实现策略
当设计要求显示“可感知”的滚动提示（如渐变遮罩、右侧滑块指示），不推荐重写整套滚动逻辑。更稳妥的做法是：
- 监听容器
scroll事件，计算scrollLeft / (scrollWidth - clientWidth)得到滚动比例 - 用绝对定位绘制一个细长轨道 + 一个动态 top/left 的滑块，宽度按比例缩放（例如轨道高 4px，滑块高 20px）
- 滑块仅在用户开始拖动或 hover 时显示（避免静默界面干扰），其余时间透明或隐藏
- 避免使用第三方库（如 SimpleBar）——它在 iOS 横屏下易与
orientationchange冲突，且增加首屏体积
特别注意横屏下的 Safari 全屏触发条件
很多开发者以为“只要隐藏滚动条就自动全屏”，其实不然。iOS Safari 隐藏地址栏的前提是：页面存在可滚动区域，且用户主动触发了向上滑动手势。因此：
- 横屏 Canvas 游戏若高度严格等于
window.innerHeight，则无滚动空间 → 地址栏永不隐藏 - 解决方案：给 body 添加轻微溢出，例如
min-height: calc(100vh + 1px);，再用overflow: hidden抑制实际滚动感，这样 Safari 会识别“有滚动潜力”，允许手势触发全屏 - 搭配
window.scrollTo(0, 1)在加载后微调一次，可辅助首次进入即隐藏地址栏（需用户交互后才允许）
