<template>
<page-meta page-font-size="16px"></page-meta>
<view class="container">
123
</view>
<view class="xx">
123
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.container {
font-size: 1rem;
}
.xx{
font-size: 16px;
}
</style> 
2***@qq.com
- 发布：2026-04-21 19:19
- 更新：2026-04-21 19:20
- 阅读：16
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows11
HBuilderX类型： 正式
HBuilderX版本号： 5.06
手机系统： Android
手机系统版本号： Android 12
手机厂商： 华为
手机机型： VRD-AL10
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
直接运行到真机，观察字体大小，最好使用宽屏设备
直接运行到真机，观察字体大小，最好使用宽屏设备
预期结果：
字体大小应该一致
字体大小应该一致
实际结果：
字体大小有明显差距
字体大小有明显差距
bug描述：
page-meta的 root-font-size属性在应用第一次打开时不生效，假设设置值为16px，文本设置为1rem，第一次启动（无论是真机还是打包）字体大小明显超过16px。
Ask小助手 - Ask社区AI助手
欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。
作为 DCloud 官方技术支持，对该 bug 反馈评审如下：
1. 反馈内容完整性评价
优点：
- 基本信息完整：包含 HBuilderX 版本（5.06）、Vue 版本（Vue3）、设备信息（华为 VRD-AL10、Android 12）等关键环境信息
- 代码示例可直接运行：提供的代码示例结构完整，包含了 template、script、style 三部分，无需修改即可复现问题
- 问题描述清晰：明确指出了 "第一次打开应用不生效" 这一关键特征，以及 rem 单位与固定 px 单位的对比差异
待补充：
- 复现步骤不够详细：建议补充是否使用自定义基座、是否开启 vconsole 调试、具体是 App-vue 还是 App-nvue 渲染模式
- 缺少关键截图：建议补充第一次打开与第二次打开的字号对比截图，以及 DevTools 中 computed 计算后的实际 font-size 值
- 未说明是否必现：建议补充该问题在冷启动 vs 热启动、标准基座 vs 自定义基座的表现差异
2. Bug 成立性分析
该 Bug 成立，依据如下：
根据知识库中的历史反馈记录，确实存在 root-font-size 设置不生效的已知问题：
-
时序问题：有开发者反馈 "有时候 setTimeout 300ms 就行，有时候 700ms 都不行"，说明
page-meta的root-font-size在页面初始化时存在设置时机问题，可能与 WebView 初始化时序有关 -
横竖屏切换失效：另有开发者报告 "设置 root-font-size 横屏，息屏后竖屏再横屏，导致页面内容变大"，说明该属性在屏幕尺寸变化后存在失效问题
-
浏览器宽度变化失效：H5 端也有类似反馈 "只要一调整浏览器的宽度，立马变成 16px"，表明该属性的响应式监听存在缺陷
技术依据：
根据 page-meta 组件文档，root-font-size 属性在 App 端 2.6.3+ 版本已支持，且明确说明用于指定 rem 单位的参考值。文档未提及首次加载不生效的限制，因此当前行为属于实现缺陷。
3. 临时解决方案
基于现有知识库，建议采用以下规避方案：
方案一：延迟设置（推荐）
由于该问题可能与页面初始化时序有关，可尝试延迟设置 root-font-size：
<script setup>
import { ref, onMounted } from 'vue'
const rootFontSize = ref('')
onMounted(() => {
// 延迟设置以避开初始化时序问题
setTimeout(() => {
rootFontSize.value = '16px'
}, 500)
})
</script>
<template>
<page-meta :root-font-size="rootFontSize"></page-meta>
<!-- 页面内容 -->
</template>本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
方案二：使用插件市场方案
可考虑使用插件市场的 page-meta 根据屏幕设置根字体大小 插件，该插件提供了动态计算根字体大小的替代实现，支持 Vue2（Vue3 兼容性需自行测试）。
方案三：使用 rpx 替代 rem
如果仅需实现响应式布局，建议优先使用 rpx 单位（以 750rpx 为屏幕基准宽度），避免使用 rem 和 root-font-size。rpx 在 uni-app 各端支持更完善，不存在首次加载失效问题。
4. 建议补充的信息
为便于开发团队定位修复，建议补充以下信息：
- 该问题在 iOS 端是否同样存在？
- 是否在
App.vue的onLaunch或onShow中有相关逻辑影响？ - 是否使用了横屏锁定（screenOrientation）配置？
- 提供 HBuilderX 5.06 的完整版本号（如 5.06.20240xxx）
结论：这是一个有效的 Bug，属于 page-meta 组件在 App 端的实现缺陷，建议开发团队优先修复初始化时序问题。
内容为 AI 生成，仅供参考
