viewport单位在iOS 8以下和Android 4.4以下不可靠：100vh计算错误、滚动不更新、键盘弹出后不重算；应改用rem+JS动态适配，以window.innerHeight为基准设font-size，并防抖、缓存、避开scroll监听。
viewport单位在iOS 8以下和Android 4.4以下基本不可用
直接说结论：vh、vw、vmin、vmax 在 iOS 8.0–8.3 和 Android 4.0–4.4 的 WebView / Safari / Chrome 中存在严重 bug：视口高度计算错误（比如 100vh 只占可视区 50%）、滚动时值不更新、键盘弹出后不重算。这不是兼容性“差”，是根本不可靠。
常见错误现象包括：height: 100vh 导致页面底部被截断；top: 50vh 元素飘在半空；固定定位 + vmin 布局在横屏时完全错位。
- 真实使用场景：全屏轮播、登录页居中卡片、底部导航栏高度自适应
- 别指望加
@supports (height: 100vh)就能兜底——这些旧环境连@supports都不支持或判断失准 - Android 4.4.4 是分水岭，之后的系统才开始稳定支持
vh
用 rem 替代 viewport 单位做“伪视口响应”
核心思路不是“模拟 vh”，而是把设计稿的基准高度（比如 640px）映射为 1rem，再通过 JS 动态设置 html 的 font-size，让 rem 值随设备物理高度线性变化。
关键不在“等比缩放”，而在“锚定设备可用高度”。例如：你希望一个模块始终占屏幕可用高度的 80%，就写 height: 80rem，然后让 1rem = window.innerHeight * 0.01。
立即学习“前端免费学习笔记（深入）”；
- JS 设置时机必须是
resize+orientationchange+ 页面加载完成，缺一不可 - 避免在
scroll中反复计算——旧机卡顿明显，且 iOS 8 下window.innerHeight滚动时会抖动 - 务必加防抖，否则 Android 4.4 WebView 里连续触发 resize 会导致
font-size疯狂重设、样式闪烁 - 示例逻辑：
function setRem() {<br> const baseHeight = 640;<br> const scale = window.innerHeight / baseHeight;<br> document.documentElement.style.fontSize = scale + 'px';<br>}<br>setRem();<br>window.addEventListener('resize', debounce(setRem, 100));
fixed 布局下 rem 计算必须剔除地址栏/状态栏侵占
旧安卓和 iOS 的地址栏、状态栏是“侵入式”的，window.innerHeight 会随着滚动动态变化（下拉显示地址栏时变小，上滑隐藏后变大），直接拿来算 font-size 会导致 rem 值来回跳。
解决方案不是猜高度，而是用“稳定高度源”：screen.height 太粗略，document.documentElement.clientHeight 更可靠，但仍有兼容风险。最稳妥的是取首次加载时的 window.innerHeight 并缓存，后续只在 orientationchange 时更新。
- 不要监听
scroll来重算 rem——旧机性能扛不住，且毫无必要 - 键盘弹出时
window.innerHeight急剧缩小，此时应冻结 rem 计算，否则输入框会被顶飞 - Android 4.2 WebView 中
screen.height返回的是密度无关像素（dp），需乘以window.devicePixelRatio才接近真实物理像素
rem + px 混合写法要小心媒体查询断点偏移
当同时用 rem 控制布局、px 控制边框/字体时，font-size 动态变化会让基于 rem 的媒体查询实际触发点漂移。比如 @media (max-width: 375px) 是稳定的，但 @media (max-width: 23.4375rem)（= 375px / 16）在 html 的 font-size 被 JS 改写后，含义就变了。
- 所有响应式断点统一用 px，不要用 rem 写媒体查询
- border、font-size、阴影等小尺寸属性坚持用 px，避免因 rem 缩放导致线条过粗或文字糊掉
- 如果必须用 rem 做字体响应，单独为
body或容器设font-size，别动html——否则整个 rem 体系都跟着晃 - 旧环境里
rem对line-height的继承行为不一致，建议显式写line-height: 1.5这类无单位值
真正麻烦的从来不是怎么写，而是旧机上 window.innerHeight 和 document.documentElement.clientHeight 的差值可能高达 120px，这个差值在不同机型、不同系统版本里毫无规律。测完一台不等于测完全部，必须真机覆盖 iOS 7–8.3、Android 4.0–4.4.4 的典型型号。
