微信小程序:列表项上同样的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; /* 强制按实际字号渲染 */
相关推荐
繁花与尘埃12 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
二流小码农13 小时前
鸿蒙开发:web页面如何适配深色模式
android·ios·harmonyos
over69713 小时前
弹性布局完全指南:从文档流到Flexbox实战
css
毕设源码-郭学长14 小时前
【开题答辩全过程】以 基于微信小程序的个性化饮品定制点餐系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
白兰地空瓶16 小时前
用 CSS3 造一场星际穿越:前端导演的《星球大战》片场手记
css
马尚道16 小时前
uniapp陪诊小程序
微信小程序
yuec16 小时前
iOS 26 你的 property 崩了吗?
ios·客户端
lh142457349517 小时前
ECSide标签<ec:table>表格对不齐问题处理
css·1024程序员节
Terio_my17 小时前
微信小程序-智慧社区项目开发完整技术文档(上)
微信小程序·小程序
加蓓努力我先飞17 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3