一行代码修复100vh bug
💡
原文中文，约2600字，阅读约需7分钟。
📝
内容提要
本文介绍了移动视口错误（100vh bug）及解决方法，包括CSS和Javascript的修复方法，使用-webkit-fill-available属性和第三方库postcss-100vh-fix。同时提到了CSS Values 4规范中的新视口单位dvh。
🎯
关键要点
- 移动视口错误（100vh bug）是指在移动设备上使用100vh时，视口高度不随地址栏的显示与隐藏而变化。
- 移动浏览器（如Chrome和Safari）在地址栏可见时，100vh的高度会被切断，导致全屏元素显示不正常。
- 解决100vh bug的方法包括使用CSS自定义属性和Javascript来动态计算视口高度。
- 可以使用-webkit-fill-available属性作为一种解决方案，但在某些情况下可能会出现问题。
- 第三方库postcss-100vh-fix提供了纯CSS解决方案，适用于多种浏览器，避免了JS的使用。
- CSS Values 4规范引入了新的视口单位dvh，能够更好地适应视口大小，简化了全屏元素的创建。
- 使用dvh单位只需一行CSS代码即可实现全屏效果，是制作视口相关高度的最佳选择。
🏷️
标签
➡️
