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-metaroot-font-size 属性依赖 CSS 的 rem 单位,而 nvue 的样式引擎对 rem 的支持有限,通常无法响应根字体大小的动态变化。

解决方案:

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