100vh 在移动端“不够高”是因为其基于初始视口高度计算且不响应地址栏显隐；推荐使用 100dvh（Chrome 105+/Safari 16.4+/Firefox 112+）并降级处理，全屏需用户手势触发且受 HTTPS 和元素类型限制。
为什么 100vh 在移动端经常“不够高”
很多开发者写 height: 100vh 本意是让容器占满整个视口，但在 iOS Safari 或部分 Android 浏览器中，地址栏收放会导致 vh 值动态变化——页面加载时取的是“含地址栏”的高度，滚动后地址栏隐藏，100vh 却不会自动补足那几十像素，结果底部留白或内容被截断。
这不是 bug，而是规范行为：vh 基于初始视口高度计算，且不响应浏览器 UI 的动态缩放。
- 临时缓解：用
min-height: 100vh+height: 100%组合，配合父级html, body { height: 100% } - 更可靠方案：改用
100dvh（dynamic viewport height），它会响应地址栏显隐——但注意兼容性：Chrome 105+、Safari 16.4+、Firefox 112+ 支持，旧版本需降级回100vh并监听resize手动修正 - 慎用
position: fixed; top: 0; bottom: 0模拟全屏——它脱离文档流，可能影响可访问性和滚动行为
requestFullscreen() 触发失败的常见原因
调用 element.requestFullscreen() 报错 TypeError: requestFullscreen is not a function 或静默失败，通常不是语法问题，而是安全策略拦截。
- 必须由用户手势触发（如
click、touchend），不能在setTimeout、fetch回调或页面加载完成时直接调用 - 目标元素需在 DOM 中且可渲染（不能是
display: none或未插入 document） - 部分浏览器要求页面为 HTTPS（本地
file://协议下 Chrome 会拒绝） - 移动端 Safari 不支持非
元素的全屏（比如 div、canvas），这是硬限制，无法绕过
检查是否生效，可用 document.fullscreenElement !== null 判断；监听退出用 document.addEventListener('fullscreenchange', handler)。
立即学习“前端免费学习笔记（深入）”；
全屏状态下如何保持布局稳定
进入全屏后，视口尺寸突变，CSS 媒体查询（如 @media (orientation: landscape)）可能重新匹配，导致样式抖动。同时，vh 单位在全屏模式下仍基于原始窗口计算，不再反映真实屏幕尺寸。
- 优先使用
100dvh替代100vh，尤其在全屏容器内做高度控制 - 避免依赖
window.innerHeight做布局计算——全屏时它不一定更新，改用document.documentElement.clientHeight更稳定 - 若需响应式调整，监听
fullscreenchange后手动切换 class，例如：document.addEventListener('fullscreenchange', () => { document.body.classList.toggle('is-fullscreen', !!document.fullscreenElement); });再用 CSS 控制.is-fullscreen > .content { height: 100dvh; }
移动端全屏的替代思路：伪全屏 + viewport 控制
当 requestFullscreen() 不可用（如 iOS 非 video 元素），或需要更细粒度控制时，“伪全屏”是实际可行的折中方案。
- 设置
锁定缩放，减少地址栏干扰 - 用
position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;覆盖整个可视区域，并确保z-index足够高 - 监听
scroll和touchmove并preventDefault()阻止默认滚动（谨慎使用，影响可访问性） - 注意：iOS 上
100dvh在伪全屏中依然比物理屏幕略小，可临时用height: -webkit-fill-available补足（仅 WebKit 支持）
真正难的不是让内容“看起来全屏”，而是让交互、滚动、键盘弹出、横竖屏切换都自然——这些细节往往比单位选择更消耗调试时间。
