微信小程序:列表项上同样的css样式在IOS上字体大小不一样

一、问题描述

偶然看到一个奇怪的现象,在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; /* 强制按实际字号渲染 */
相关推荐
晓得迷路了2 小时前
栗子前端技术周刊第 150 期 - Stack Overflow 开发者调查结果、TanStack Start 1.0...
javascript·css·后端
疯狂敲代码的老刘2 小时前
d2r-mobile:3.2千星开源暗黑破坏神2 iOS兼容层,3天冲上GitHub日榜
ios·github
程序员小孔.2 小时前
基于 SpringBoot + UniApp + Vue 的家政服务系统设计与实现
前端·数据库·spring boot·python·docker·微信小程序
黑科技iOS上架15 小时前
App Store5.6隐藏功能究竟怎么排查?
ios·审核
Yannik18 小时前
iOS Swift Package Manager(SPM)私有组件完整实操
ios·swift
随遇丿而安18 小时前
第 4 周:28KB 的 PNG 占了 8MB 内存,因为图片内存看尺寸不看文件大小
ios
leizhen1984080919 小时前
Vibe Coding:门槛降了,但判断力成了新的门槛
人工智能·安全·ios
我就是不信1 天前
Swift 方法派发机制详解
开发语言·ios·swift
IT研究室1 天前
最新计算机毕业设计选题推荐-基于微信小程序的汉服交易系统-网站-文档指导-Java-springboot
java·微信小程序·课程设计
AIsoft_86891 天前
科会通录音工具倍速回放怎么切换速度
ios·智能手机