前端入坑指南——chrome模拟器和真机样式不一致

移动端为了兼容各种机型的适配问题,一般会采用相对单位rem(font size of the root element)来给定DOM的width、height、padding、margin、font-size、border等。确实解决了很多移动端适配的问题,但是,在一些特殊情况下会遇到chrome模拟器和真机不一致的情况。

举个栗子:图1chrome模拟器:iPhone6p , 图2 真机iPhone6p:


图1



图2

在模拟器下调的好好的,为什么有些机型就是被挤下去了呢。

      这会不会是rem相对单位的问题呢,产生这种怀疑,对照chrome调试器发现出现问题的地方的宽度是414px,和模拟器的逻辑分辨率是一样的。图3最外层div宽度414  ≈  图4(20.7+393.312=414.012)四舍五入,所以每排的第三个div没有被挤下去。

图3
图4

但是在真机下,就不会四舍五入了,算一排dom的总宽:

0.5rem*41.4px + (0.18519rem +2.91667rem +0.00926rem

*2) *3*41.4px+2px*3 = 414.25119599999994px,当多了0.2312个像素单位会多占用一个设备像素所以真机下最后一个div被挤下去了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容