收藏
回答

微信小程序wxss rpx转换px bug

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信iOS客户端 8.0.7 2.17.0

在微信ios客户端,mac微信开发者工具中。样式使用绝对定位,left设置为前面块的宽度和,会有1px的缝隙

显示效果

代码如下

运行结果

16+73=90-1

使用iphone6/7/8 Plus

按照官方给的公式计算,结果是74px,但实际是73px

最后一次编辑于  2021-07-05
回答关注问题邀请回答
收藏

2 个回答

  • 蓝茫
    蓝茫
    2022-08-15

    需要动态的将rpx转px,才不会有这种问题,不同的手机相同的rpx转出来的px是不一样的

    // rpx转px
    rpxToPx(rpx) { 
        const screenWidth = uni.getSystemInfoSync().screenWidth return (screenWidth * Number.parseInt(rpx)) / 750 } 
    
    // px转rpx 
    pxToRpx(px) {
       const screenWidth = uni.getSystemInfoSync().screenWidth return (750 * Number.parseInt(px)) / screenWidth }
    
    2022-08-15
    有用
    回复
  • Nocturner
    Nocturner
    2021-07-06

    你这代码片段解释不了任何问题啊,另外,开发工具上确实存在计算不准的问题,但是真机上不会,至于px和rpx的比例(这里用pre指代),建议算法是pre= wx.getSystemInfoSync().windowWidth/750

    rpx会恒定将宽分成750份,用物理屏幕的宽除750,得到正确比例再进行计算,真机可开发工具显示一致

    2021-07-06
    有用
    回复 4
    • ᥬ🌝᭄
      ᥬ🌝᭄
      2021-07-06
      真机也有这个问题,是可以复现的
      2021-07-06
      回复
    • Nocturner
      Nocturner
      2021-07-06回复ᥬ🌝᭄
      你的代码片段是写死的rpx,当然必现
      2021-07-06
      回复
    • ᥬ🌝᭄
      ᥬ🌝᭄
      2021-07-06回复Nocturner
      多谢提醒,经测试发现微信官方转换时是向下取整的,我重新写了一个四舍五入的算法,目前解决了这个问题
      2021-07-06
      回复
    • Lgowen
      Lgowen
      2021-11-19回复ᥬ🌝᭄
      请问一下您这个是怎么解决的 能分享一下吗
      2021-11-19
      回复
登录 后发表内容