iOS Safari 全高视频修复方案——真正有效（在四小时的无效尝试之后）

Source: Dev.to

The problem

如果你尝试在 iOS Safari 上让全屏英雄视频正常工作，可能已经花了数小时阅读那些重复的建议，而这些建议根本无法解决问题。视频底部会被裁剪，或者出现空隙，亦或是折叠线以下的内容被 Safari 的工具栏遮住。

What the internet tells you to try

• 100vh – 太高。Safari 是基于 隐藏工具栏后的视口 来计算的，而不是用户实际看到的视口。
• 100svh – “小视口高度”，本应解决此问题，但并不可靠。
• 100dvh – “动态视口高度”，会随工具栏的显示和隐藏而更新。会导致布局抖动，仍然无法解决问题。
• 100lvh – “大视口高度”。接近目标，但在更大的 iPhone 上仍然不足。
• -webkit-fill-available – 只在 WebKit 上有效，破坏 Chrome，并且在嵌套时失效。
• 使用 window.innerHeight 的 JavaScript 方案 – innerHeight 返回当前可见的高度（较短的那段），于是又回到原点。
• env(safe-area-inset-bottom) 搭配 viewport-fit=cover – 对于让内容远离凹槽和底部栏有帮助，但并未根本解决高度问题。

这些方法都被尝试、组合、反复调试了数小时，然而在较高的手机上视频仍然显示不完整。

What actually worked

/* hero.css */
.hero {
  min-height: calc(100lvh + 60px);
}

让英雄区 故意更高，然后调整底部对齐元素的位置（例如在移动端把 bottom: 15% 改为 bottom: 25%），使它们在首次加载时能够舒适地位于可视区域内。

Conclusion

这并不优雅，感觉像是一个 hack，但用户只会注意到英雄视频是否填满屏幕或出现破碎。多加一点高度可以确保视频不被裁剪，而多出的像素会被用户滚动过去——大多数用户根本不会注意到。

如果你发现了更简洁、可靠的 iOS Safari 视口奇怪行为的解决方案，欢迎在评论中分享。否则，让英雄区稍微高一点并调整内容位置，是一种务实的解决办法。祝你好运！