从 2011 safari ios 6 开始出现这问题
比如当某个内容使用了 100vh, 在 URL bar 出现和隐藏时，高度会不一样
vh 行为开始改版
到了 2016 年，chrome mobile 56 开始固定了，不在依赖 URL bar
这里有 3 个概念
- vh (viewport height), 是 largest possible viewport (URL bar & footer nav hidden)
- ICB(Initial Containing Block), 是 smallest possible viewport (URL bar & footer nav show)
- fixed position 的 height percent 依据当下的 viewport (URL bar show and hidden 会改变 heigh)
vh 在手机很麻烦
如果使用 100vh, 那么最下方的内容将会被 IOS safari 的 footer nav 给遮盖掉……
要用 100% 却需要把所有的 parent 都设置 100%……
要在一开始定位在 footer nav 上面，又不能用 100vh……
解决 vh 在手机的麻烦
JS set css custom variable
JS: window.innerHeight / 100 = --vh;
CSS: height: calc(--vh * 50);
JS set body height
在 initial 后给 body 一个固定的高
CSS：Nested css
把所有的 parents 都设置 100%
CSS: -webkit-fill-available
在能用的空间下，用足空间。目前 FIrefox 完全不兼容
语法 stretch 将会被替代 -webkit-fill-available
CSS media query
通过判断是什么手机，给固定的高度
总结
不同的需求需要不同的 work around, 目前没有依照打天下的方法
Links
- https://aryedoveidelman.com/fixing_vh_units_on_mobile_once_and_for_all
- https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/
- https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
- https://dev.to/admitkard/mobile-issue-with-100vh-height-100-100vh-3-solutions-3nae
- https://vilcins.medium.com/viewport-bug-in-mobile-safari-ea706efc9c74
- https://dev.to/torbet/how-to-really-handle-mobile-viewports-374k
- https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
- https://caniuse.com/?search=fill-available