Taro 4.0.8 H5 postcss.pxtransform 配置px单位转换结果和小程序不一致

[wanghui9309]

相关平台

H5

浏览器版本: iOS、安卓
使用框架: React

复现步骤

    postcss: {
      autoprefixer: {
        enable: true,
      },
      pxtransform: {
        enable: true,
        config: {
          onePxTransform: true,
          unitPrecision: 5,
          propList: ['*'],
          selectorBlackList: [],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0,
          baseFontSize: 20,
          maxRootSize: 40,
          minRootSize: 20
        }
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },

期望结果

预期样式和小程序保持一致

实际结果

H5样式比小程序小几号

环境信息

👽 Taro v4.0.8


  Taro CLI 4.0.8 environment info:
    System:
      OS: macOS 15.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.20.5 - ~/.nvm/versions/node/v18.20.5/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.5/bin/yarn
      npm: 10.8.2 - ~/.nvm/versions/node/v18.20.5/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.8 => 4.0.8 
      @tarojs/components: 4.0.8 => 4.0.8 
      @tarojs/helper: 4.0.8 => 4.0.8 
      @tarojs/plugin-framework-react: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-alipay: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-h5: 4.0.8 => 4.0.8 
      @tarojs/plugin-platform-weapp: 4.0.8 => 4.0.8 
      @tarojs/react: 4.0.8 => 4.0.8 
      @tarojs/runtime: 4.0.8 => 4.0.8 
      @tarojs/shared: 4.0.8 => 4.0.8 
      @tarojs/taro: 4.0.8 => 4.0.8 
      @tarojs/taro-loader: 4.0.8 => 4.0.8 
      @tarojs/webpack5-runner: 4.0.8 => 4.0.8 
      babel-preset-taro: 4.0.8 => 4.0.8 
      eslint-config-taro: 4.0.8 => 4.0.8 
      react: ^18.0.0 => 18.3.1 
      taro-ui: 3.1.0-beta.4 => 3.1.0-beta.4 

---

补充信息

index.html 添加如下代码，能实现和小程序样式一致

  <script>
      !(function(n) {
        function f() {
          var e = n.document.documentElement,
          w = e.getBoundingClientRect().width,
          x = (40 * w) / 750
          e.style.fontSize = x   'px'
        }
        n.addEventListener('resize', function() {
          f()
        }),
        f()
      })(window)
  </script>