body字体大小设为vw、全量用em单位时Chrome出现异常空白如何解决

问题原因 #

Chrome浏览器存在默认最小字体限制，中文环境下默认最小字体为12px。你将body的font-size设置为1vh，当页面视口高度小于1200px时，1vh的计算值会小于12px，此时Chrome会强制将body的font-size拉高到12px。
由于你全站所有样式属性都使用em单位定义，em是基于父元素字体大小计算的相对单位，父元素字体大小被强制放大后，所有元素的尺寸、边距、行高都会超出你预设的数值，最终撑出多余的异常空白。

可行解决办法 #

• 调整基准字体大小的缩放比例：把body的font-size调整为10vh，同时将原代码中所有用em定义的数值统一除以10。调整后只有当视口高度小于120px时才会触发最小字体限制，常规移动端、桌面端场景都不会触达该阈值，从根源避免强制缩放问题。
• 增加最小字体兼容声明：给body添加-webkit-text-size-adjust: 100%属性，部分场景下可以禁止浏览器自动调整字体大小，注意该属性在部分高版本Chrome中仅对移动端生效，可搭配上一个方案共同使用。
• 替换全局单位基准：把全站的相对单位从em改为rem，根节点html的font-size设置为clamp(12px, 1vh, 9999px)，确保根字体大小不会低于浏览器最小限制，同时保留响应式缩放的特性。

内容的提问来源于stack exchange，提问作者daniel