移动端页面viewport缩放比不等于1时文本膨胀现象

移动端页面viewport缩放比不等于1时文本膨胀现象

问题描述

<meta name="viewport" content="width=device-width, initial-scale=1">

或是：

<meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">

当initial-scale取值不等于1时，移动端页面可能出现：文本字号与CSS设置的font-size不一致，比font-size大许多的情况。
该现象称为Font Boosting，是webkit对于移动端页面优化的一种行为。
早期前端开发没有对移动端设备实行有效的适配时，PC端页面在移动端看来会显得极小，影响用户体验。
Webkit工作组为使用户不必滑动屏幕或双击放大屏幕也能看清页面内容，提出了Font Boosting特性。但它目前往往造成不必要的结果。
它的计算公式较为复杂，但实测可能在28px以上触发。

解决方案

避免其生效的方法有两种：

1. 指定viewport width=320，其余属性取默认值（即不作设置）；
2. 将发生Font Boosting的元素显式设置宽高度；

显然以上两种方法均不适用，但对于方法2而言，max-height同样生效。
因此解决方法为：设置元素max-height：100%即可。