收藏
回答

使用rpx时在不同机型下的兼容性问题

画了一个时间刻度条,5分钟一个刻度,每个刻度设置的宽度为4rpx,14个小时共有169个刻度共676rpx,使用for循环进行遍历,在设定时间内就显示橙色,整时刻度为绿色并始终显示,其他时间就不显示颜色。

仅仅在宽度为375的iPhoneX上可以无缝的显示,其他屏幕宽度的机型都会有空隙。

这是iPhoneX(宽度375)的显示效果,刻度条完整显示没有空隙

这是iPhone XR(宽度414)的显示效果,刻度条之间有空隙

css部分代码如下:

/* 短刻度 */
.scale_grip_small {
  width4rpx;
  height25rpx;
}

/* 中间刻度 */
.scale_grip_middle {
  width4rpx;
  height35rpx;
  background#41b349!important;
}

/* 长刻度 */
.scale_grip {
  width4rpx !important;
  height45rpx !important;
  background#41b349 !important;
}



回答关注问题邀请回答
收藏

1 个回答

  • Ding
    Ding
    2023-06-28

    小程序定义屏幕宽度为 750rpx,在 iphone x 上,1 rpx = 0.5px。4rpx = 2px,手机能够正常定位渲染。而在 iphonexr 上,1rpx = 0.552px,4rpx = 2.208,小数部分没法渲染,就导致了你的空隙。

    可以改成 px 来做

    2023-06-28
    有用 2
    回复 7
    • Stephen.Albert.Star
      Stephen.Albert.Star
      2023-06-28
      感谢回答,可是用px的话适配咋整
      2023-06-28
      回复
    • Ding
      Ding
      2023-06-28回复Stephen.Albert.Star
      可以通过 getSystemInfo 拿到屏幕宽度
      2023-06-28
      1
      回复
    • Stephen.Albert.Star
      Stephen.Albert.Star
      2023-06-28回复Ding
      大佬能稍微详细说一下解决方案吗
      2023-06-28
      回复
    • Ding
      Ding
      2023-06-28回复Stephen.Albert.Star
      大致逻辑是,先通过 wx.getSystemInfo 取到屏幕宽度,再除以 169 个刻度,就得到了每个刻度的宽度,最后通过 setData 设置刻度的 style width。 其中边距、最大刻度宽度等细化问题,你自己计算时考虑进去就行了。
      2023-06-28
      1
      回复
    • Stephen.Albert.Star
      Stephen.Albert.Star
      2023-06-28回复Ding
      OKk,谢谢大佬
      2023-06-28
      回复
    查看更多(2)
登录 后发表内容