uni-app 中无法稳定获取 systemFontSize,iOS 的 fontSizeSetting 恒为空,Android 各厂商实现不一;应仅判断是否开启大字体(布尔态),H5 需启用 manifest.json 中的 enableFontSize 才响应系统缩放,小程序和 App 端基本不可控。
uni-app 里拿不到 systemFontSize?用 getSystemInfoSync() 看实际值
uni-app 没有直接暴露系统字体缩放比例的 api,getsysteminfosync() 返回的 fontsizesetting 字段在 ios 和 android 行为不一致:ios 始终返回 ''(空字符串),android 多数机型返回类似 '1.2' 的字符串,但部分厂商(如华为 emui、小米 miui)可能根本不填这个字段。
真正能稳定读取的,是 screenHeight 和 screenWidth 这类基础尺寸,再结合已知的默认逻辑推断缩放状态——但别指望它精确到小数点后一位。实际项目中,更靠谱的做法是:只区分「是否开启大字体」这个布尔态,而不是去还原系统设置里的具体百分比。
- 调用
uni.getSystemInfoSync().fontSizeSetting,若结果为非空字符串且大于'1.0',视为用户开启了放大 - 若为空或无法解析,fallback 到检查
uni.getSystemInfoSync().pixelRatio是否异常高(比如 ≥ 3.5),间接提示可能启用了辅助字体 - 不要对
fontSizeSetting做 parseFloat 后直接乘到 px 上——不同系统渲染机制不同,CSS 的rem或em才是响应式基础
用 rem + uni.setStorageSync 动态改根字体,但别在 onLaunch 里硬写死
想让文字随系统缩放自动变大?靠 JS 动态改 document.documentElement.style.fontSize 是可行的,但 uni-app 的 Vue 实例初始化早于页面 DOM 渲染,直接在 App.vue 的 onLaunch 里操作 document 会失败(H5 环境下可能报错 document is not defined,小程序环境压根没 document)。
正确时机是:H5 在 mounted 钩子中操作;小程序需借助 uni.getSystemInfo 异步获取后再更新;App 端则依赖 plus.screen.getScale()(仅 5+ App 支持)。
- H5 页面:在
mounted()中执行document.documentElement.style.fontSize = (baseSize * scale) + 'px',baseSize建议设为16 - 小程序:用
uni.getSystemInfo({ success: res => { ... } })拿fontSizeSetting,再通过uni.createSelectorQuery()或 class 绑定控制文字层级 - 别把计算逻辑塞进
App.vue的全局样式里——不同平台编译产物结构不同,H5 有效,小程序无效
uni-app 的 px 不响应系统字体缩放?那是你没关掉 enableFontSize
很多人发现写了 font-size: 16px,系统调大字体后文字纹丝不动,其实是 uni-app 默认关闭了对系统字体缩放的透传。H5 平台需要手动启用,小程序平台则受限于 WebView 容器能力,基本不可控。
H5 端关键配置在 manifest.json 的 h5 节点下:"enableFontSize": true。不开这个,所有 px 都按原始 CSS 像素渲染,跟系统设置完全脱钩。
- 开启后,
px单位会跟随系统字体缩放比例变化(类似原生 Web 的text-size-adjust行为) - 但副作用明显:按钮、间距、图片尺寸也会被拉伸,容易破坏布局——所以多数项目选择只对文字类元素(
text、input、textarea)启用em/rem,其他仍用rpx或固定px - App 端和小程序端此配置无效,
enableFontSize仅作用于 H5
安卓微信里字体忽大忽小?检查 WebView 的 textZoom 和 UA 识别
在安卓微信内置浏览器中,即使开了 enableFontSize,文字仍可能跳变,根源是微信 X5 内核对 textZoom 的特殊处理:它会强制将页面整体缩放(不只是文字),而且不触发 resize 事件,JS 无法监听。
更麻烦的是,X5 内核 UA 里没有明确标识字体缩放状态,fontSizeSetting 也常为空。此时唯一较稳的方式,是放弃实时响应,改为「用户点击按钮手动切换字号」,把控制权交还给用户。
- 检测是否在 X5 内核:正则匹配
MQQBrowser|QQ,再加webView字段判断 - 对 X5 环境禁用自动适配,只提供「小/标准/大」三档按钮,用
uni.setStorageSync('userFontSize', 'large')存档并重载页面 - 别试图用
window.matchMedia('(min-resolution: 2dppx)')推断缩放——X5 不支持这类媒体查询
系统字体缩放不是个开关问题,而是一连串平台差异、内核限制和用户习惯的叠加。最省心的方案,往往是承认它的不可靠,转而用可控的交互代替被动响应。

















