一行代码修复100vh bug | 京东云技术团队
💡
原文中文，约2600字，阅读约需6分钟。
📝
内容提要
移动视口错误（100vh bug）是移动浏览器中的一个问题，导致全屏元素在地址栏可见时被切断。解决方法包括使用CSS和Javascript监听resize事件，使用-webkit-fill-available属性，或使用第三方库postcss-100vh-fix。另外，可以使用新的视口单位dvh来解决问题。这些方法都能有效解决移动视口错误，使工作更轻松。
🎯
关键要点
- 移动视口错误（100vh bug）是移动浏览器中的一个问题，导致全屏元素在地址栏可见时被切断。
- 移动浏览器的视口高度动态变化，但vh值保持不变，导致100vh不反映实际可见高度。
- 解决方法包括使用CSS和Javascript监听resize事件，设置自定义属性以动态调整vh值。
- 可以使用-webkit-fill-available属性作为解决方案，但在某些情况下可能会出现问题。
- 第三方库postcss-100vh-fix可以有效修复该问题，适用于多种浏览器。
- 新的视口单位dvh可以解决移动视口错误，始终适应视口大小。
- CSS的发展为解决前端问题提供了更多的选择，dvh单位是制作视口相关高度的最佳选择。
🏷️
标签
➡️
