uni-app 在nvue页面和vue页面中设置相同大小的字体 手机端显示不一致 一大一小
uni-app 在nvue页面和vue页面中设置相同大小的字体 手机端显示不一致 一大一小
| 项目信息 | 详细信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 6.1 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.1.18 |
| 手机系统 | Android |
| 手机系统版本号 | Android 10 |
| 手机厂商 | 华为 |
| 手机机型 | pot-al00a |
| 页面类型 | nvue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
操作步骤：
- 编写组件。
- 引入组件，操作查看效果
- 发现在nvue页面中字体大小所占位置与vue页面中不同
预期结果：
发现在nvue页面中字体大小所占位置与vue页面中相同
实际结果：
发现在nvue页面中字体大小所占位置与vue页面中不同
bug描述：
在nvue页面和vue页面中 设置相同大小的字体，但是手机端显示一大一小
[](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210617/bdc4711611ca5f8f5c89f431f219bfc9)
[kang-tabBar_0.0_.1_.rar](//ask.dcloud.net.cn/file/download/file_name-a2FuZy10YWJCYXJfMC4w_.1_.rar)
更多关于uni-app 在nvue页面和vue页面中设置相同大小的字体 手机端显示不一致 一大一小的实战教程也可以访问 https://www.itying.com/category-93-b0.html
8 回复
更多关于uni-app 在nvue页面和vue页面中设置相同大小的字体 手机端显示不一致 一大一小的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个典型的 nvue 和 vue 页面渲染差异问题。nvue 基于原生渲染，而 vue 页面基于 webview 渲染，两者在字体渲染机制上存在本质区别。
主要原因：
- 渲染引擎差异：nvue 使用原生文本组件渲染字体，vue 使用浏览器内核渲染，不同引擎对字体大小的计算方式不同
- DPI 适配差异：nvue 和 vue 对设备像素密度的适配策略不一致
- 字体度量差异：原生渲染和 Web 渲染在字体度量（如行高、字间距）上采用不同标准
解决方案：
- 使用 rpx 单位：在 nvue 中统一使用 rpx 作为字体单位，避免使用 px
- 调整字体大小：通过实际测试微调 nvue 中的字体大小值，通常需要比 vue 页面稍小的数值
- 全局样式统一：在 App.vue 中设置全局字体样式，确保一致性
- 条件编译：针对 nvue 和 vue 页面分别设置合适的字体大小
/* nvue 页面 */
.text {
font-size: 28rpx;
}
/* vue 页面 */
.text {
font-size: 14px; /* 约等于 28rpx */
}