引言
在移动端H5开发中，使用相同的适配单位vw、%、rem、cqw、lvh等等，在开发中往往以windows为主，从而疏忽了在safari浏览器的效果，从而导致适配问题的产生。
问题定位
最近公司在搞原生转H5化意在快速占领市场及快速迭代开发，抽离出了很多个H5来开发，这期间也是踩坑不断，其中就包括本文字中讲到的在IOS端中出现了滚动条。
1. 为什么 100vh 在 Android 和 iOS 上表现不同？
在 Android 浏览器
大多数 Android WebView 和 Chrome 内核浏览器，100vh = 设备的可视高度（屏幕高度减去状态栏、工具栏）。
当地址栏/工具栏显示或隐藏时，Chrome 会重新计算 vh，页面会自动适配。
在 iOS Safari
100vh = 整个屏幕高度（包括顶部地址栏、底部工具栏）。
Safari 不会实时更新 vh，即使地址栏缩回去了，100vh 依旧是初始全屏高度。
结果：页面内容往往会被“撑大”，底部留白或者出现滚动条。
2. 为什么会导致滚动条？
iOS Safari 把地址栏和底部工具栏也算进 100vh，但实际上它们会覆盖页面。
当用户滑动，地址栏收缩时，Safari 没有同步更新 vh，页面实际显示的区域比 100vh 小 → 内容超出可视区 → 出现滚动条。
解决方案
- 使用vmin单位：height: vmin(100vh, 100%);
- 使用calc属性，height：calc(100vh - nav - tab);
- 使用cqh，height: 100cqh;
