别再用 100vh 了！移动端视口高度的终极解决方案

移动端网页开发中，100vh像是个甜蜜的陷阱。设计师们总爱用这个单位撑满屏幕，结果用户手指一滑——底部内容直接被浏览器工具栏吞掉半截。安卓和iOS的工具栏就像弹簧，时隐时现，把固定高度的布局搅得七零八落。

去年给社区电商做页面时，商品详情页的立即购买按钮总在玩捉迷藏。客户投诉像雪花片飞来，测试组小伙儿急得直薅头发。后来改用window.innerHeight配合JavaScript动态计算，这才发现移动端视口高度压根不是铁板一块。用户滚动页面时，浏览器地址栏缩起的瞬间，100vh和实际可用高度的差距能差出整整一条工具栏的距离。

CSS新宠dvh单位最近开始冒头。这个会变魔术的小家伙能自动扣除浏览器UI占用的空间，像是为移动端量身定制的伸缩尺。不过老版本Safari还是那个倔脾气，非要-webkit-fill-available才能哄得住。实测下来，最稳妥的配方是给关键元素设置min-height: 100dvh，再补条-webkit-fill-available的备用声明。

有些工程师喜欢玩视口单位混合运算。比如用calc(100vh - env(safe-area-inset-bottom))对付iPhone的刘海屏，这招在电商大促页面特别管用。但千万别把所有鸡蛋放一个篮子里，媒体查询始终是最后的保险绳。那次看到有个H5活动页在折叠屏手机上显示得支离破碎，就是因为忘了测试极端比例的情况。

用户体验从来不是非黑即白的选择题。有时候放弃像素级的完美控制，改用弹性布局配合适度留白，反而能让页面在各种设备上都呼吸顺畅。就像老裁缝做衣裳，得留出些活动余量，人才穿得自在。