CSS viewport单位在旧移动端支持不佳_利用固定像素值与rem配合

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。立即学习“前端免费学习笔记（深入）”； 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。