比较好的室内设计网站厦门市建设工程质监站网站

一、问题描述

偶然看到一个奇怪的现象，在IOS上微信小程序的一个列表（
列表项应用了相同的CSS类），却出现了不同大小的字：

二、问题排查

1.Android设备及开发者工具显示正常
2.iPhone 6plus (IOS 12.5.7版本)显示正常
3.iPhone 12(IOS 16.3)版本显示异常（出现了不同大小的字）

原因分析： ‌
（1）Webkit 内核自动调整字体‌： iOS 的 Webkit 内核会根据容器宽度自动缩放字体，导致相同样式在不同容器中显示差异。

‌（2）单位使用不统一‌： 混合使用 px 和 rpx（如部分样式固定为 px），导致响应式适配失效。

（3）字体继承或覆盖问题‌： 未显式声明字体样式，部分文本节点继承了系统默认字体或父级容器的限制性样式47。

‌（4）媒体查询冲突‌： 不同屏幕尺寸的媒体查询未覆盖全部场景，特定分辨率下触发意外样式覆盖

由于是同一个列表，列表项使用了相同的css样式类，因此有可能是因为OS 的 Webkit 内核自动调整字体‌导致。

三、解决方案

在页面或者组件中禁用 Webkit 字体缩放：

-webkit-text-size-adjust: none; /* 强制按实际字号渲染 */