Skip to content

微信resize bug导致设置html的fontSize错误 #16518

@ShaoGongBra

Description

@ShaoGongBra

相关平台

H5

浏览器版本: 微信
使用框架: React

复现步骤

bug描述
https://developers.weixin.qq.com/community/minihome/doc/000a06dc19c3503bf0127747061c00

使用这个patch修复后可以正常设置,原理就是排除掉小于100的值

diff --git a/node_modules/@tarojs/webpack5-runner/dist/webpack/H5WebpackPlugin.js b/node_modules/@tarojs/webpack5-runner/dist/webpack/H5WebpackPlugin.js
index bda93d8..0ed42a1 100644
--- a/node_modules/@tarojs/webpack5-runner/dist/webpack/H5WebpackPlugin.js
    b/node_modules/@tarojs/webpack5-runner/dist/webpack/H5WebpackPlugin.js
@@ -84,7  84,7 @@ class H5WebpackPlugin {
         const rootValue = baseFontSize / options.deviceRatio[designWidth] * 2;
         let htmlScript = '';
         if (((_d = options === null || options === void 0 ? void 0 : options.targetUnit) !== null && _d !== void 0 ? _d : 'rem') === 'rem') {
-            htmlScript = `!function(n){function f(){var e=n.document.documentElement,r=e.getBoundingClientRect(),width=r.width,height=r.height,arr=[width,height].filter(function(value){return Boolean(value)}),w=Math.min.apply(Math,arr),x=${rootValue}*w/${designWidth};e.style.fontSize=x>=${max}?"${max}px":x<=${min}?"${min}px":x "px"}; n.addEventListener("resize",(function(){f()})),f()}(window);`;
             htmlScript = `!function(n){function f(){var e=n.document.documentElement,r=e.getBoundingClientRect(),width=r.width,height=r.height,arr=[width,height].filter(function(value){return value>100}),w=Math.min.apply(Math,arr),x=${rootValue}*w/${designWidth};e.style.fontSize=x>=${max}?"${max}px":x<=${min}?"${min}px":x "px"}; n.addEventListener("resize",(function(){f()})),f()}(window);`;
         }
         const args = {
             filename: `${entry || 'index'}.html`,

期望结果

1

实际结果

1

环境信息

Taro CLI 4.0.5 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 22.8.0 - /var/folders/rf/gd60z12164z72bny7z_0d4f80000gn/T/yarn--1726212938886-0.6481858953018396/node
      Yarn: 1.22.22 - /var/folders/rf/gd60z12164z72bny7z_0d4f80000gn/T/yarn--1726212938886-0.6481858953018396/yarn
      npm: 10.8.2 - ~/.nvm/versions/node/v22.8.0/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.5 => 4.0.5 
      @tarojs/components: 4.0.5 => 4.0.5 
      @tarojs/helper: 4.0.5 => 4.0.5 
      @tarojs/plugin-framework-react: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-alipay: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-h5: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-jd: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-qq: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-swan: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-tt: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-weapp: 4.0.5 => 4.0.5 
      @tarojs/react: 4.0.5 => 4.0.5 
      @tarojs/rn-runner: 4.0.5 => 4.0.5 
      @tarojs/rn-supporter: 4.0.5 => 4.0.5 
      @tarojs/runtime: 4.0.5 => 4.0.5 
      @tarojs/shared: 4.0.5 => 4.0.5 
      @tarojs/taro: 4.0.5 => 4.0.5 
      @tarojs/taro-loader: 4.0.5 => 4.0.5 
      @tarojs/taro-rn: 4.0.5 => 4.0.5 
      @tarojs/webpack5-runner: 4.0.5 => 4.0.5 
      babel-preset-taro: 4.0.5 => 4.0.5 
      eslint-config-taro: 4.0.5 => 4.0.5 
      expo: ~51.0.32 => 51.0.32 
      react: ^18.2.0 => 18.3.1 
      react-native: ~0.75.3 => 0.75.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    F-reactFramework - ReactT-h5Target - 编译到 H5V-4Version - 4.x

    Type

    No type

    Projects

    Status

    Padding

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions