在部分手机上padding+width!=总宽度问题
发布于 5 年前 作者 mye 2392 次浏览 来自 问答

如题,我给一个view设置了一个宽度为690rpx;padding为0 30rpx;然后再工具上正常,在普通16:9的手机上大多数正常,在iPhone 5.5 英寸的手机上还有在全面屏的手机上690+30+30<750!这个问题一年以前在iPhone 5.5 英寸就有。我不知道是这些手机数学学得不好还是什么情况,公司就差统一组织这些手机上数学课了。

iPhone Xs Max

开发者工具

4 回复

一般不这么写的,要么再套一个view,外面写padding,里面写固定

rpx是一种换算的方法,有计算就会有误差,因为精度是有限的,不能理解成任何设备显示效果完全一样,占满全屏可以用width:100%来实现

从模拟器上来看,以iphone6 p 为例 690*0.552=380.88 实际渲染出来只有380,2*30*0.552=2*16.56=33.12 实际渲染出来 2 * 16=32 ,总共加起来380+32=412,屏幕宽度为415,这样右侧就会少3px

rpx 做计算的时候精度不行

也不知道是在哪个步骤丢失的

尤其是做乘除法的时候

做滚动列表

刚开始一点误差

到最后一个元素的时候

已经无法忍受了我之前的解决方案是直接在 JS 里面计算为 px

赋值到 style 属性上对于 rpx

根本不能把它当成 px 那样的定量单位

顶多当成定性单位

比如规定宽度100%啊

定义一个边长为屏幕宽度的正方形啊

之类的

css: box-sizing: border-box有写吗

回到顶部