uni-app page-meta 标签设置 root-font-size 时，双折屏与三折屏大屏打开后根节点字体会重新计算，导致使用 rem 的界面布局错乱

可以自己算的
let srceenNunber = 19.2 * 6.25; //因设计图是1920所有把设计图分为19.2份，所以html字体大小为100*6.25=16px
//窗体改变大小触发事件
uni.onWindowResize( ( res ) => {
this.window.screenHeight = res.size.screenHeight
this.window.screenWidth = res.size.screenWidth
this.window.windowHeight = res.size.windowHeight
this.window.windowWidth = res.size.windowWidth
this.fontsize = this.window.windowWidth / srceenNunber
// console.log(窗口：${this.window.windowWidth}*${this.window.windowHeight},字体：${this.fontsize} )

        } )  

        //打开获取屏幕大小  
        uni.getSystemInfo( {  
            success: ( res ) => {  
                this.window = res  
                this.fontsize = res.windowWidth / srceenNunber  
                console.log( '设备信息：', res )  
                // console.log(`窗口：${this.window.windowWidth}*${this.window.windowHeight},字体：${this.fontsize}`)  
            }  
        } )<br>

在 uni-app 中使用 page-meta 标签设置 root-font-size 时，如果在大屏设备（如双折屏或三折屏）上打开应用，根节点的字体大小会根据屏幕宽度重新计算。这会导致使用 rem 作为单位的界面布局出现错乱问题。为了确保在不同屏幕尺寸下布局稳定，我们可以采取一些措施来动态调整 root-font-size 或使用其他布局单位。

以下是一个解决方案，通过动态计算并设置 root-font-size 来适应不同屏幕尺寸：

1. 在 App.vue 中监听窗口尺寸变化：

<script>
export default {
  onLaunch() {
    this.setWindowFontSize();
    uni.$on('windowResize', this.setWindowFontSize);
  },
  methods: {
    setWindowFontSize() {
      const screenWidth = uni.getSystemInfoSync().screenWidth;
      // 假设设计稿宽度为 375px，根字体大小设计为 16px
      const baseWidth = 375;
      const baseFontSize = 16;
      const rootFontSize = (screenWidth / baseWidth) * baseFontSize;
      uni.setSystemInfo({
        field: 'windowWidth',
        success: (res) => {
          uni.createSelectorQuery().select('#app').boundingClientRect(rect => {
            if (rect) {
              uni.setNavigationBarTitleText({
                title: `Root Font Size: ${rootFontSize.toFixed(2)}px`
              });
              // 动态设置 page-meta 中的 root-font-size
              const pageMeta = `
                <page-meta
                  root-font-size="${rootFontSize}px"
                />
              `;
              const app = document.getElementById('app');
              if (app) {
                app.innerHTML = pageMeta + app.innerHTML;
              }
            }
          }).exec();
        }
      });
    }
  }
};
</script>

注意：直接操作 DOM 来插入 page-meta 标签可能不是 uni-app 推荐的做法，因为 uni-app 框架本身会管理页面的 meta 信息。这里仅为演示目的，实际开发中可能需要通过其他方式（如框架提供的 API 或配置）来实现。

1. 使用 CSS 媒体查询： 针对特定屏幕尺寸使用 CSS 媒体查询来调整布局，减少对 rem 的依赖。

@media (min-width: 1024px) {
  /* 针对大屏设备的样式调整 */
  .container {
    font-size: calc(16px * (100vw / 375)); /* 动态计算字体大小 */
  }
}

1. 使用 vw、vh 等视口单位： 考虑使用视口宽度（vw）和高度（vh）作为布局单位，这些单位基于视口大小，不会受到 root-font-size 变化的影响。

.element {
  width: 50vw; /* 元素宽度为视口宽度的 50% */
  height: 50vh; /* 元素高度为视口高度的 50% */
}

通过上述方法，可以在不同屏幕尺寸下保持界面布局的稳定性。