作者简介： Dirk，货拉拉高级前端工程师，多年货拉拉老司机，现负责小拉司机与货运司机运力相关开发工作，猛攻体验与调优。
前言
前端工程师作为离用户最近的开发岗位之一，我们从设计师获取到设计稿，将设计稿还原为 web 页面，用户每天都在使用我们开发的页面，使用体验上的好坏和我们息息相关。作为开发者的我们年龄基本都处于青壮年阶段，浏览正常布局网页觉得稀疏平常，但对于大龄人群来说，碍于年龄、视力或其他原因，正常大小的字体对他们来说却很难看得清。
事情要从这张截图说起：
这是一张页面错乱的截图，可以明显看出这是开启了系统大字体模式，受司机群体的年龄或是抢单等因素，调整超大系统字体的司机不在少数。超大字体可能导致各种页面和应用程序（包括 H5）的错乱。本文将深入探讨这个问题。
Webview 现状
iOS
系统开启大字体模式，系统设置已变为大字体，但端内 webview 并未受到大字体模式影响：
Safari 浏览器内，可以看到网址区域字体被放大了，但网页内容并未受到影响。
基本可以确定 iOS 并未强制让网页文本放大。
Android
再看安卓这边，开启系统大字体后，端内 webview 出现了字体放大问题，少量文字出现了换行与溢出省略的问题。
来到端外浏览器，网页内容展示比例都是正常的（下图 4）
由于测试手机最大只能设置到这么大的字体，整体显示还在可接受范围，但司机使用的机型可能能开启更大的字体模式，大字体模式下无论何种布局，网页都会被强制修改字体 font-size 的大小，文字内容一但过大就会影响到就页面的布局。
原字体会被乘以一个放大系数，如 20px 的文本，放大系数 1.5 最终展示的就是 30px。
// 字体 * 系数
20px * 1.5 = 30px
以标题为例可以直接获取它的字体大小看下：
左图为正常模式，右图为大字体模式，分别获取到的标题字体大小，可算出放大系数 ≈ 1.4
其他 APP 是怎么做的
由于 iOS 在大字体模式下表现正常，这里只比较 Android 上的表现。
京东
基本都出现了文字的遮挡或展示不全
滴滴
滴滴端内直接禁掉了缩放，微信浏览器内做了也禁用，放到我们 APP 端内打开可以看到中间部分文字布局也乱了。
如何禁用 Webview 大字体
iOS
iOS 其实也是可以被系统控制缩放的，只是并未强加到 web 内容上，例如用微信浏览器内强制开启大字体：
其开启的方式是为页面设置 text-size-adjust 它是一个通用的字体大小调整属性。将其值设置为 100% 可以让网页中的字体大小在手机系统字体大小改变时保持不变。
text-size-adjust在 iOS 手机上兼容性不错，针对 iOS 系统，可直接添加这个 CSS 基本就可做到禁用大字体。
html {
-webkit-text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
京东也是通过这种方式来限制 iOS 的缩放
Android
text-size-adjust 在 Android 端并不好使。
通常的做法也是最直接的，端上可添加代码直接禁用字体缩放。
WebSettings webSettings = webView.getSettings();
webSettings.setTextZoom(100);
还有种情况，就是微信浏览器内，微信 js-sdk 可直接禁用：
if (
typeof WeixinJSBridge == 'object' &&
typeof WeixinJSBridge.invoke == 'function'
) {
handleFontSize();
} else {
document.addEventListener('WeixinJSBridgeReady', handleFontSize, false);
}
function handleFontSize() {
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 });
WeixinJSBridge.on('menu:setfont', function () {
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 });
});
}
有多少人需要大字体
我们编写了一个小工具，来收集司机的放大比例与具体分布情况，核心代码逻辑如下。
export interface ILargeFontModeReport {
baseFontSize: number; // 原始字号
realSize: number; // 真实字号
fontZoom: number; // 缩放倍率
}
// 创建 <div style="font-size: 14px">test</div>
// baseFontSize = 14
createCheckDom();
const computedSizeString = window
.getComputedStyle(dom, null)
.getPropertyValue('font-size'); // 获取实际字体大小
const computedSizeMatch = computedSizeString.match(/^([0-9.]+)px$/);
if (computedSizeMatch) {
const report: ILargeFontModeReport = {
baseFontSize,
realSize: Number(computedSizeMatch[1]),
fontZoom: Number((realSize / baseFontSize).toFixed(2)); // 计算缩放比例
}
sendReport(report);
}
针对两款面向司机群体的 APP 内的 Webview 页面，收集到的数据如下。
货拉拉司机开启大字体模式的占比超过了 34% ，小拉司机则超过了 22% ，通过自测更多页面发现放大系数达到 1.3 就会有页面出现文字布局错位。而在我们灰度到的货运与小拉司机中放大系数在 1.3 以上的司机占比分别达到了 7.66% 和 4.59% ，若放大到全量司机，这个数字还是比较大的。
如何适配 Webview 大字体
单独设计一套大字体模式，无论从哪个角度来看 ROI（Region of Interest / 投资回报率） 都是很低的。
但我们回过头捋一捋：
大字体模式存在目的是什么？
好的大字体适配 H5 应该是什么样的？
市面上的 H5 一味的禁用大字体模式体验真的好吗？
我们再看看大字体模式下的网页表现：文字重叠，看不清楚。
适配大字体的首要目标是看清文本内容。
这部分用户在乎的可能并不是花里胡哨的设计，他们想要的是好用的功能、流畅的体验、表意清晰的界面。他们因为想要看清而选择了大字体模式，他们知道这个页面是被放大了的，页面布局是有乱掉的可能。
但无论如何文字内容一定要表达到位。
那么我们就有了适配方向，其实只需要在页面样式上做少量的微调就能一定程度上解决这个问题。最主要的两条原则就是：
1.定宽不定高
定宽：让文字自动换行。
不定高：设置最小高度，让容器可被超高内容撑开。
2.勿用行高做间距
文案不定死行高，利用 margin 也可做到同样间距的效果。
适配效果举例
按照我们的适配方向适配可看到（图 2）即清晰的展示了文案，又未影响到正常字体模式下的页面布局
总结与思考
在互联网的趋势下，中老年人群体在移动互联网中的比例越来越大，在职业司机群体中大龄人群占比更不在少数，尤其货运司机中的大龄占比相对更高，他们的生活依赖各类软件。我们作为开发者，往往只会注意到自己这个群体，并未在意其他群体的使用感受。
从适老角度来说，做好适配设计确实需要花费不少的时间和精力，且可预见的 ROI 并不高，但技术其实可以用较低成本照顾到这部分人群。
在设计上，选用易读易懂的字体与色彩，避免过于复杂的布局和交互，并为大字体留出一些适配空间。
在开发上，我们开发时拿出少量时间，做一些样式上的简单适配，保证大字体下的文字清晰展示。
只需要稍微多一点点倾斜与关怀，看似微不足道的改变，也能给他人带来巨大的方便。
