根本原因是移动端浏览器地址栏收放导致vh动态变化，应改用min-height:100vh+height:100%、JS同步--vh变量、监听resize/orientationchange事件并防抖处理，确保全屏体验稳定。

vh/vw 切换时页面抖动或内容被裁切

根本原因是 vh 基于视口高度计算，而移动端浏览器地址栏收放会动态改变可用 vh 值（比如从 100vh → 104vh → 96vh），导致全屏元素突然缩放或位移。iOS Safari 尤其明显。

• 别用 height: 100vh 做幻灯片容器，改用 min-height: 100vh + height: 100% 组合，让内容撑开而非强制锁定
• 对关键幻灯片项加 will-change: transform，减少重排重绘抖动
• 在 resize 事件里监听 window.innerHeight 变化，手动更新 --vh CSS 变量（避免直接依赖 CSS 的 vh）

用 CSS 自定义属性模拟稳定 vh 单位

原生 vh 在 iOS Safari 滚动时不可靠，必须用 JS 动态同步一个“真实视口高度”变量，再由 CSS 使用。

• 在 <style></style> 中定义 :root { --vh: 100vh; }
• 页面加载后立即执行：

  function setVh() {
    document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
  }
  setVh();
  window.addEventListener('resize', setVh);

• 幻灯片容器写成 height: calc(var(--vh, 1vh) * 100)，这样即使 vh 失效，也能 fallback 到 JS 计算值

全屏切换后 touchmove 被拦截或滑动卡顿

常见于调用 element.requestFullscreen() 后，iOS Safari 默认禁用滚动穿透，且 touch-action: none 容易误配，导致幻灯片手势失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 确保幻灯片容器设置 touch-action: pan-y pinch-zoom（允许垂直滚动和双指缩放），而不是 none 或 manipulation
• 全屏后主动移除 body 上可能存在的 overflow: hidden，否则部分安卓机型会锁死 touch 事件
• 避免在 fullscreenchange 回调里立刻操作 DOM 高度，加 requestAnimationFrame 延迟一帧再更新样式

vw/vh 在横竖屏切换时未重算导致布局错乱

设备旋转时，resize 事件触发不及时或被节流，CSS 中的 vw/vh 不会自动重解析，尤其在 PWA 或 WebView 中更明显。

立即学习“前端免费学习笔记（深入）”；

• 监听 orientationchange 事件（比 resize 更精准捕获方向变化）
• 不要只靠媒体查询 @media (orientation: landscape) 控制尺寸，它不触发重绘；必须配合 JS 更新 --vw/--vh 变量
• 若使用 Swiper 等库，确认其 observer: true 和 observeParents: true 已启用，否则容器尺寸变化不会触发 slide 重布局

真正难处理的不是怎么写全屏，而是怎么让 --vh 在 iOS Safari 的地址栏进出、键盘弹起、横竖屏、PWA 安装态之间保持稳定——这些状态会同时修改视口尺寸，但只触发一次 resize，得靠组合监听和防抖来兜底。