uni-app nvue 页面 page-meta设置字体无效

uni-app nvue 页面 page-meta设置字体无效

示例代码：

<page-meta root-font-size="10px"></page-meta>

操作步骤：

<page-meta root-font-size="10px"></page-meta>

预期结果：

  • 更改字体大小

实际结果：

  • vue 页面正常改变 nvue 页面无效果

bug描述：

  • nvue 页面 page-meta 设置字体无效

| 信息类别       | 信息内容     |
|----------------|--------------|
| 产品分类       | uniapp/App   |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | win10        |
| HBuilderX类型  | 正式         |
| HBuilderX版本号 | 3.2.3        |
| 手机系统       | Android      |
| 手机系统版本号  | Android 11   |
| 手机厂商       | 小米         |
| 手机机型       | 小米8        |
| 页面类型       | nvue         |
| 打包方式       | 云端         |
| 项目创建方式   | HBuilderX    |

更多关于uni-app nvue 页面 page-meta设置字体无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

nvue页面不支持

更多关于uni-app nvue 页面 page-meta设置字体无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中，page-meta 组件设置 root-font-size 属性确实无效，这是 nvue 与 vue 页面在渲染机制上的差异导致的。

原因分析：

  1. nvue 页面采用原生渲染，其样式体系基于 CSS 的子集，不支持通过 root-font-size 这类全局 CSS 自定义属性来动态调整字体。
  2. page-meta 的 root-font-size 属性依赖 CSS 的 rem 单位，而 nvue 的样式引擎对 rem 的支持有限，通常无法响应根字体大小的动态变化。

解决方案：

  1. 直接使用固定单位（推荐）：在 nvue 页面中，建议直接使用 px 或 rpx 为单位定义字体大小，避免依赖 rem。
    .text {
    font-size: 32rpx; /* 或 16px */
}
  2. 通过全局变量动态计算：若需动态调整字体，可在 uni.$app 或 globalData 中定义字体比例，在样式中通过计算赋值（需使用内联样式或 JS 动态设置）。
    // 在页面脚本中
data() {
    return { fontSizeScale: 1 };
},
computed: {
    textStyle() {
        return { fontSize: 32 * this.fontSizeScale + 'rpx' };
    }
}
回到顶部