Merge pull request NervJS#15643 from handsomeliuyang/main

【harmony-hybrid】平台fontsize支持一多适配
handsomeliuyang · May 6, 2024 · 0b289bb · 0b289bb
2 parents 02b845d + 2338538
commit 0b289bb
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/packages/taro-platform-harmony-hybrid/src/program.ts b/packages/taro-platform-harmony-hybrid/src/program.ts
@@ -129,6 +129,31 @@ export default class H5 extends TaroPlatformWeb {
         return args
       })
 
+      // 修改htmlWebpackPlugin插件的script脚本
+      chain.plugin('htmlWebpackPlugin').tap((args) => {
+        const options = this.config?.postcss?.pxtransform?.config || {}
+        // const max = options?.maxRootSize ?? 40
+        // const min = options?.minRootSize ?? 20
+        const baseFontSize = options?.baseFontSize || 20// (min > 1 ? min : 20)
+        const designWidth = (input => typeof this.config.designWidth === 'function'
+          ? this.config.designWidth(input)
+          : this.config.designWidth)(baseFontSize)
+        const rootValue = baseFontSize / this.config.deviceRatio![designWidth!] * 2
+        let htmlScript = ''
+        if ((this.config?.targetUnit ?? 'rem') === 'rem') {
+          /**
+           * 缩放策略为：
+           * 1. 手机-竖屏，缩放策略为“自动缩放”
+           * 2. 折叠屏、Pad竖屏，缩放策略为“依据设计尺寸，大小不变”
+           * 3. Pad(模屏)、2in1(默认)，缩放策略为“依据设计尺寸，大小不变”
+           * 4. 2in1（全屏），缩放策略为“依据设计尺寸，大小不变”
+           */
+          htmlScript = `!function(n){function f(){var e=n.document.documentElement;var w=Math.floor(e.getBoundingClientRect().width);if(w<600){var x=${rootValue}*w/${designWidth};e.style.fontSize=x+"px"}else if(w<840){w=${designWidth}/2;var x=${rootValue}*w/${designWidth};e.style.fontSize=x+"px"}else if(w<1440){w=${designWidth}/2;var x=${rootValue}*w/${designWidth};e.style.fontSize=x+"px"}else{w=${designWidth}/2;var x=${rootValue}*w/${designWidth};e.style.fontSize=x+"px"}}n.addEventListener("resize",(function(){f()}));f()}(window);`
+        }
+        args[0].script = htmlScript
+        return args
+      })
+
       // Note: 本地调试 stencil 组件库时，如果启用 sourceMap 则需要相关配置
       chain.module
         .rule('map')