3.5.3 的字体相比较3.4.x版本字体偏大 #12361

dingzc2450 · 2022-08-23T03:10:07Z

复现仓库

https://github.com/dingzc2450/taro-demo.git
浏览器版本: Chrome 版本 104.0.5112.102（正式版本）
使用框架: React

复现步骤

安装3.5.3 版本的Taro 字体偏大

const config = {
  projectName: 'myProject',
  date: '2022-8-22',
  // 这里设置640 也字体偏大
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [],
  defineConstants: {
  },
  copy: {
    patterns: [
    ],
    options: {
    }
  },
  framework: 'react',
  compiler: 'webpack5',
  cache: {
    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
  },
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {

        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },

      pxtransform: {
        enable: true,
        config: {
          platform: 'h5',
          // 这里设置640 也字体偏大
          designWidth: 750,
          /* pxtransform 配置项 */
        },
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  rn: {
    appName: 'taroDemo',
    postcss: {
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

期望结果

字体能够与3.4.x下的表现形式一样

实际结果

字体偏大

环境信息

  Taro CLI 3.5.3 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.13.2 - F:\nodejs\node.EXE
      Yarn: 1.22.19 - F:\cache\node_global\yarn.CMD
      npm: 8.1.2 - F:\nodejs\npm.CMD

补充信息

依照这个设置为640 似乎无效. #12154 (comment)
无论是通过Taro.pxTransform 或postcss-pxtransform 30px的大小在3.4.x版本都转换为0.64rem
但在 3.5.3 版本内使用 Taro.pxTransform 转换为0.64rem，通过postcss-pxtransform 插件转换的为0.75rem。
下附3.5.3版本下转换大小截图

The text was updated successfully, but these errors were encountered:

emorywang · 2022-08-23T04:02:19Z

我也发现有此问题，字号偏大，造成很多布局会错位

taro-bot2 · 2022-08-23T06:01:11Z

Hello~

这个问题由于客观原因不会被修复，如果没有更多的问题这个 issue 将在 7 天后被自动关闭。

如果您在这 7 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

dolphin0618 · 2022-08-23T08:01:48Z

我改了下html字体大小的脚本，貌似正常了

<script>
    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=375){r.style.fontSize="20px"}else{if(a<375){r.style.fontSize="10px"}else{r.style.fontSize=a/375*10+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
  </script>

dingzc2450 · 2022-08-23T08:08:19Z

我改了下html字体大小的脚本，貌似正常了

<script>
    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=375){r.style.fontSize="20px"}else{if(a<375){r.style.fontSize="10px"}else{r.style.fontSize=a/375*10+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
  </script>

但postcss-pxtransform插件转换得到的rem为单位样式大小依旧和Taro.pxTransform转换得到的rem为单位样式大小不同

dolphin0618 · 2022-08-23T08:15:23Z

我改了下html字体大小的脚本，貌似正常了

<script>
    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=375){r.style.fontSize="20px"}else{if(a<375){r.style.fontSize="10px"}else{r.style.fontSize=a/375*10+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
  </script>

但postcss-pxtransform插件转换得到的rem为单位样式大小依旧和Taro.pxTransform转换得到的rem为单位样式大小不同

那是他们这个默认的设计稿尺寸变了，不过毕竟生成的css文件中的rem值不会变，就按照这个值来适配呗，等后期更新再看，先救火

dingzc2450 · 2022-08-23T08:43:30Z

我改了下html字体大小的脚本，貌似正常了
<script>
    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=375){r.style.fontSize="20px"}else{if(a<375){r.style.fontSize="10px"}else{r.style.fontSize=a/375*10+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
  </script>
但postcss-pxtransform插件转换得到的rem为单位样式大小依旧和Taro.pxTransform转换得到的rem为单位样式大小不同
那是他们这个默认的设计稿尺寸变了，不过毕竟生成的css文件中的rem值不会变，就按照这个值来适配呗，等后期更新再看，先救火
目前我这边是这样子临时解决

const config = {
  projectName: 'myProject',
  date: '2022-8-22',
  // 这里设置640 也字体偏大
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 640 / 750,
    828: 1.81 / 2
  },
};

deviceRatio的 750 这边设置比例为640 / 750

dolphin0618 · 2022-08-23T08:51:08Z

我改了下html字体大小的脚本，貌似正常了
<script>
    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=375){r.style.fontSize="20px"}else{if(a<375){r.style.fontSize="10px"}else{r.style.fontSize=a/375*10+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
  </script>
但postcss-pxtransform插件转换得到的rem为单位样式大小依旧和Taro.pxTransform转换得到的rem为单位样式大小不同
那是他们这个默认的设计稿尺寸变了，不过毕竟生成的css文件中的rem值不会变，就按照这个值来适配呗，等后期更新再看，先救火
目前我这边是这样子临时解决
const config = {
  projectName: 'myProject',
  date: '2022-8-22',
  // 这里设置640 也字体偏大
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 640 / 750,
    828: 1.81 / 2
  },
};
deviceRatio的 750 这边设置比例为640 / 750

这样在小程序里也ok么?

dingzc2450 · 2022-08-23T08:59:49Z

小程序里或许也是ok的~
目前仅在h5端测试有效，可以仅放到h5配置项内

  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },

      pxtransform: {
        enable: true,
        config: {
          platform: 'h5',
          // 这里设置640 也字体偏大
          designWidth: 750,
          deviceRatio: {
            640: 2.34 / 2,
            750: 640 / 750,
            828: 1.81 / 2
          },
          /* pxtransform 配置项 */
        },
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },

taro-bot2 · 2022-08-23T09:01:10Z

Hello~

这个问题由于客观原因不会被修复，如果没有更多的问题这个 issue 将在 7 天后被自动关闭。

如果您在这 7 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

Howie126313 · 2022-10-08T07:00:16Z

小程序里或许也是ok的~ 目前仅在h5端测试有效，可以仅放到h5配置项内

  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },

      pxtransform: {
        enable: true,
        config: {
          platform: 'h5',
          // 这里设置640 也字体偏大
          designWidth: 750,
          deviceRatio: {
            640: 2.34 / 2,
            750: 640 / 750,
            828: 1.81 / 2
          },
          /* pxtransform 配置项 */
        },
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },

我这边试了一下单独配置 h5 木有生效。。。。直接改了 html。。。

Howie126313 · 2022-10-08T07:00:52Z

Hello~

这个问题由于客观原因不会被修复，如果没有更多的问题这个 issue 将在 7 天后被自动关闭。

如果您在这 7 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

这个问题后续版本也木有修复呀。。。。虽然周报上写修复了

dingzc2450 · 2022-10-08T12:32:46Z

@Howie126313
3.5.3 版本下我设置这样子 750: 640 / 750 ，然后依旧保持designWidth: 750, 页面是和原来是一样子的。我是看了一下pxtransform 这个配置对应的插件后改为如下是可行的~
随后因为其它原因以及排期，我目前依旧保持着3.4.x版本

    deviceRatio: {
            640: 2.34 / 2,
            750: 640 / 750,
            828: 1.81 / 2
          },

ShaoGongBra · 2022-10-10T08:44:41Z

可以这样设置，设置之后不影响其他端，小程序和app

deviceRatio: {
    640: 2.34 / 2,
    750: process.env.TARO_ENV === 'h5' ? 640 / 750 : 1,
    828: 1.81 / 2
  },

makeng · 2022-12-14T08:09:12Z

可以这样设置，设置之后不影响其他端，小程序和app

deviceRatio: {
    640: 2.34 / 2,
    750: process.env.TARO_ENV === 'h5' ? 640 / 750 : 1,
    828: 1.81 / 2
  },

这样整体字体正常了。但 Taro.pxTransform 仍不正确😭。

makeng · 2022-12-14T08:23:00Z

index.html 分辨率计算替换成：<script><%= htmlWebpackPlugin.options.script %></script>。
/config/index.js 的分辨率部分不改

taro-bot2 bot added F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x labels Aug 23, 2022

ZakaryCode added wonfix 不会修复（这可能并非是一个问题） walk-around 绕过问题 labels Aug 23, 2022

taro-bot2 bot added the to be closed label Aug 23, 2022

taro-bot2 bot removed the to be closed label Aug 23, 2022

taro-bot2 bot added the to be closed label Aug 23, 2022

MellowCo mentioned this issue Aug 24, 2022

taro + vue3 编译不会把px转化为rem或rpx响应式单位 MellowCo/unocss-preset-weapp#3

Closed

taro-bot2 bot mentioned this issue Aug 27, 2022

项目周报 (2022 年 8 月 20 日 - 2022 年 8 月 27 日) #12390

Closed

taro-bot2 bot removed the to be closed label Aug 30, 2022

taro-bot2 bot closed this as completed Aug 30, 2022

ZakaryCode moved this to Done in H5 Apr 10, 2023

ZakaryCode added this to H5 Apr 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

3.5.3 的字体相比较3.4.x版本字体偏大 #12361

3.5.3 的字体相比较3.4.x版本字体偏大 #12361

dingzc2450 commented Aug 23, 2022 •

edited

Loading

emorywang commented Aug 23, 2022

taro-bot2 bot commented Aug 23, 2022

dolphin0618 commented Aug 23, 2022

dingzc2450 commented Aug 23, 2022

dolphin0618 commented Aug 23, 2022

dingzc2450 commented Aug 23, 2022 •

edited

Loading

dolphin0618 commented Aug 23, 2022

dingzc2450 commented Aug 23, 2022

taro-bot2 bot commented Aug 23, 2022

Howie126313 commented Oct 8, 2022

Howie126313 commented Oct 8, 2022

dingzc2450 commented Oct 8, 2022 •

edited

Loading

ShaoGongBra commented Oct 10, 2022

makeng commented Dec 14, 2022

makeng commented Dec 14, 2022

3.5.3 的字体相比较3.4.x版本字体偏大 #12361

3.5.3 的字体相比较3.4.x版本字体偏大 #12361

Comments

dingzc2450 commented Aug 23, 2022 • edited Loading

相关平台

复现仓库

复现步骤

期望结果

实际结果

环境信息

补充信息

emorywang commented Aug 23, 2022

taro-bot2 bot commented Aug 23, 2022

dolphin0618 commented Aug 23, 2022

dingzc2450 commented Aug 23, 2022

dolphin0618 commented Aug 23, 2022

dingzc2450 commented Aug 23, 2022 • edited Loading

dolphin0618 commented Aug 23, 2022

dingzc2450 commented Aug 23, 2022

taro-bot2 bot commented Aug 23, 2022

Howie126313 commented Oct 8, 2022

Howie126313 commented Oct 8, 2022

dingzc2450 commented Oct 8, 2022 • edited Loading

ShaoGongBra commented Oct 10, 2022

makeng commented Dec 14, 2022

makeng commented Dec 14, 2022

dingzc2450 commented Aug 23, 2022 •

edited

Loading

dingzc2450 commented Aug 23, 2022 •

edited

Loading

dingzc2450 commented Oct 8, 2022 •

edited

Loading