移动端高度兼容性问题

问题描述

移动设备因 顶部工具栏 ， 底部工具栏 的存在，导致 100vh 的实际高度与 PC 浏览器表现不一致，且工具栏是动态显示的，可以通过某些操作或手势隐藏。

具体可见如下文章：

移动端布局避坑指南：从100vh到dvh，彻底解决动态视口适配难题

前端 leader 亲测：移动端布局用 dvh 比 100vh 节省 60% 调试时间

解决方案

避免使用 vh，转而私用 dvh. (chromium > 108 可用)
动态监听尺寸变化，实时计算浏览器窗口高度(window.innerHeight)。 (低版本浏览器)

注意事项

如果移动端使用的是 rem 单位，那在进行浏览器高度设置时，需要考虑 px 到 rem 的转换系数问题。