1***@qq.com

发布：2024-11-20 01:56
更新：2025-03-03 23:24
阅读：204

【报Bug】<page-meta>中root-font-size在app端中设置不生效，h5正常

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 11 专业版24H2

HBuilderX类型：正式

HBuilderX版本号： 4.29

手机系统： Android

手机系统版本号： Android 14

手机厂商： OPPO

手机机型：一加ACE3pro

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

根目录创建store文件夹，文件夹中创建index.js,内容为

import { createStore } from 'vuex'  
const store = createStore({  
    state:{//存放状态  
        "scaleFontSize":16  
    },  
    mutations:{  
        setFontScale(state,n){  
            state.scaleFontSize=n  
        }  
    }  
})  

export default store

创建一个页面设置文字大小

<view class="font">  
                <view class="title">{{$t('index.font')}}</view>  
                <view class="font-list">  
                    <view class="font-item" v-for="(item, index) in fontSize" :key="index" @click="onFontSizeChange(item)">  
                        <text class="text">{{item.text}}</text>  
                        <text class="check" v-if="item.code==fontScale">{{$t('font.check')}}</text>  
                    </view>  
                </view>  
</view>

js为

export default {  
      data() {  
        return {  
                fontScale: 16  
        }  
      },  
      computed:{  
            fontSize(){  
                return[  
                    {  
                        text: this.$t('font.small'),  
                        code:12  
                    },  
                    {  
                        text: this.$t('font.standard'),  
                        code:16  
                    },  
                    {  
                        text: this.$t('font.big'),  
                        code:20  
                    },  
                    {  
                        text: this.$t('font.biggest'),  
                        code:24  
                    }  
                ]  
            }  
      },  
      onLoad() {  
            this.fontScale=this.$store.state.scaleFontSize  
            if(!this.fontScale) {  
                this.fontScale = 16;  
            }  
            console.log(this.$store.state.scaleFontSize)  
      },  
      methods: {  
            onFontSizeChange(e){  
                this.fontScale = e.code;  
                this.$store.commit('setFontScale', this.fontScale);  
                uni.setStorage({  
                    key:'rootFontSize',  
                    data:this.fontScale  
                })  
            }  
      }  
    }

通过该页面动态更新scaleFontSize的大小，在文件所有页面中，均添加

<page-meta :page-font-size="`${$store.state.scaleFontSize}px`" :root-font-size="`${$store.state.scaleFontSize}px`"></page-meta>

并将页面中文字大小单位设置为rem

预期结果：

更新字体大小后，所有页面文字大小均发生改变

实际结果：

在内置浏览器和chrome中，不光rem单位的文字大小发生改变，所有rpx单位大小也发生了改变。
在app中，只有当前页面发生了改变，若前往其他页面或退出后重新进入，则会发现均未改变

bug描述：

<page-meta>中root-font-size在app端中设置不生效，h5正常
我在页面中pagemeta设置如下

<page-meta :page-font-size="`${$store.state.scaleFontSize}px`" :root-font-size="`${$store.state.scaleFontSize}px`"></page-meta>

手机上显示时，仍以其原本大小显示，不能根据scaleFontSize更新

2024-11-20 01:56 负责人:无分享

1 个回复

3***@qq.com - Benjen

在 setup 中 setTimeout 一下可以解决这个问题，一般设置 200 ms 即可

<template>  
    <page-meta :root-font-size="fontSize"></page-meta>  
    <view class="container">  
       Test  
    </view>  
</template>  

<script setup>  
import { ref } from 'vue';  
const fontSize = ref(10);  
setTimeout(() => {  
    fontSize.value = 14;  
}, 200);  
</script>

要回复问题请先登录或注册

【报Bug】<page-meta>中root-font-size在app端中设置不生效，h5正常

预期结果：

更新字体大小后，所有页面文字大小均发生改变

实际结果：

在内置浏览器和chrome中，不光rem单位的文字大小发生改变，所有rpx单位大小也发生了改变。
在app中，只有当前页面发生了改变，若前往其他页面或退出后重新进入，则会发现均未改变

bug描述：

1 个回复

公告

相关问题

【报Bug】<page-meta>中root-font-size在app端中设置不生效，h5正常

预期结果： 更新字体大小后，所有页面文字大小均发生改变

实际结果： 在内置浏览器和chrome中，不光rem单位的文字大小发生改变，所有rpx单位大小也发生了改变。 在app中，只有当前页面发生了改变，若前往其他页面或退出后重新进入，则会发现均未改变

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

预期结果：

更新字体大小后，所有页面文字大小均发生改变

实际结果：

在内置浏览器和chrome中，不光rem单位的文字大小发生改变，所有rpx单位大小也发生了改变。
在app中，只有当前页面发生了改变，若前往其他页面或退出后重新进入，则会发现均未改变