画了一个时间刻度条,5分钟一个刻度,每个刻度设置的宽度为4rpx,14个小时共有169个刻度共676rpx,使用for循环进行遍历,在设定时间内就显示橙色,整时刻度为绿色并始终显示,其他时间就不显示颜色。
仅仅在宽度为375的iPhoneX上可以无缝的显示,其他屏幕宽度的机型都会有空隙。
这是iPhoneX(宽度375)的显示效果,刻度条完整显示没有空隙
这是iPhone XR(宽度414)的显示效果,刻度条之间有空隙
css部分代码如下:
/* 短刻度 */
.scale_grip_small {
width: 4rpx;
height: 25rpx;
}
/* 中间刻度 */
.scale_grip_middle {
width: 4rpx;
height: 35rpx;
background: #41b349!important;
}
/* 长刻度 */
.scale_grip {
width: 4rpx !important;
height: 45rpx !important;
background: #41b349 !important;
}
小程序定义屏幕宽度为 750rpx,在 iphone x 上,1 rpx = 0.5px。4rpx = 2px,手机能够正常定位渲染。而在 iphonexr 上,1rpx = 0.552px,4rpx = 2.208,小数部分没法渲染,就导致了你的空隙。
可以改成 px 来做