收藏
回答

在部分手机上padding+width!=总宽度问题

问题模块 框架类型 问题类型 操作系统版本 手机型号 微信版本
客户端 小程序 Bug ios;Android iPhone XS Max;VIVO NEX;荣耀 V10;等,公司的所有全面屏还有iPhone6p等都出现这个问题了。 最新

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


iPhone Xs Max


开发者工具

最后一次编辑于  03-29
回答关注问题邀请回答
收藏

4 个回答

  • 蓝湛。
    蓝湛。
    03-29


    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

    03-29
    赞同 1
    回复 4
    • 郭三岁 จุ๊บ
      郭三岁 จุ๊บ
      03-29

      难受,这个问题困扰我很久了

      03-29
      回复
    • 蓝湛。
      蓝湛。
      03-29回复郭三岁 จุ๊บ

      全屏之类避免这种写法就可以了啊,其他的情况其实肉眼目测基本不会有太大误差。

      03-29
      1
      回复
    • 蓝湛。
      蓝湛。
      03-29回复郭三岁 จุ๊บ

      可以用width:100%;box-sizing:border-box;padding:0 30rpx;

      03-29
      1
      回复
    • 郭三岁 จุ๊บ
      郭三岁 จุ๊บ
      03-29回复蓝湛。

      我现在就用这种方法在写,但是太麻烦了,并且跟PC端切换经常忘

      03-29
      回复
  • zzc
    zzc
    04-01

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

    04-01
    赞同
    回复 1
    • 郭三岁 จุ๊บ
      郭三岁 จุ๊บ
      04-01

      我们现在都是先把view转成border-box然后再写了

      04-01
      回复
  • 陌陌搬砖
    陌陌搬砖
    04-01

    rpx 做计算的时候精度不行


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

    尤其是做乘除法的时候

    做滚动列表

    刚开始一点误差

    到最后一个元素的时候

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

    赋值到 style 属性上 对于 rpx

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

    顶多当成定性单位

    比如规定宽度100%啊

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

    之类的

    04-01
    赞同
    回复 1
    • 郭三岁 จุ๊บ
      郭三岁 จุ๊บ
      04-01

      对啊,感觉有点不太好用

      04-01
      回复
  • Bn
    Bn
    03-29

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

    03-29
    赞同
    回复 4
    • 郭三岁 จุ๊บ
      郭三岁 จุ๊บ
      03-29

      没有啊,看上面两个图,它是690+30+30=745左右,差了5rpx;

      03-29
      回复
    • Bn
      Bn
      03-29

      这种问题没碰到过呢,移动端开发基本都是用这个的这些宽度直接设置100%,padding和border都会从宽度里面扣。可以搜索一下 css

      03-29
      回复
    • Bn
      Bn
      03-29

      css盒模型

      03-29
      回复
    • 郭三岁 จุ๊บ
      郭三岁 จุ๊บ
      03-29

      我知道盒模型,但是这个为什么不生效呢

      03-29
      回复