鸿蒙next系统在uni-app中使用page-meta设置rootFontSize字体大小无效

鸿蒙next系统在uni-app中使用page-meta设置rootFontSize字体大小无效

开发环境 版本号 项目创建方式
Windows 26100.4946 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.75

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS 5.0.1

手机厂商：华为

手机机型：nova14

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：
```html
<page-meta :root-font-size="rootFontSize"></page-meta>
<view class="login-page">test</view>  

this.rootFontSize = '30rpx'

操作步骤：

个人中心-设置字体大小，选择对应的字号，重载页面，页面字体大小没有跟着变化（安卓和ios正常），页面字体单位都是rpx

预期结果：

根据用户选择的字体大小rootFontSize变化，页面字体跟着变化

实际结果：

页面字体大小没变化

bug描述：

使用page-meta动态设置app字体大小无效：rootFontSize修改后，页面字体还是保持初始的字体大小


更多关于鸿蒙next系统在uni-app中使用page-meta设置rootFontSize字体大小无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

page-meta还没有支持鸿蒙

更多关于鸿蒙next系统在uni-app中使用page-meta设置rootFontSize字体大小无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个后续有规划支持鸿蒙不

在鸿蒙Next系统中，page-meta的root-font-size属性确实存在兼容性问题。这是由于鸿蒙Next系统的底层渲染机制与Android/iOS存在差异，导致动态修改根字体大小时未能正确触发页面重渲染。

解决方案：

  1. 使用条件编译针对鸿蒙系统处理：
// 在onLoad或需要修改字体时
onLoad() {
  #ifdef HARMONY
    // 鸿蒙系统下直接操作DOM
    document.documentElement.style.fontSize = '30rpx'
  #else
    this.rootFontSize = '30rpx'
  #endif
}
  1. 通过CSS变量实现字体缩放：
.login-page {
  font-size: calc(28rpx * var(--font-scale, 1));
}

// 在JS中动态设置CSS变量
setFontSize(scale) {
  #ifdef HARMONY
    document.documentElement.style.setProperty('--font-scale', scale)
  #else
    this.rootFontSize = `${28 * scale}rpx`
  #endif
}
  1. 降级方案 - 使用rem单位：
/* 在App.vue中设置基准字体 */
page {
  font-size: 30rpx;
}

/* 页面中使用rem */
.login-page {
  font-size: 1rem; /* 等同于30rpx */
}
回到顶部