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

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

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

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

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

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

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

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