谷歌模拟器和手机真机适配的坑

在这次的项目中，采用了rem作为单位，之所以采用rem是因为rem相对于根元素的字体大小的单位（可以联想一下em）。一旦根节点html定义的font-size变化，那么整个网页中运用到rem的也会变化。根节点html的font-size是根据屏幕大小的变化来变化的。JS监听浏览器字体大小，如图1-1。

图1-1

然而，谷歌模拟器iPhone 5（并不只是iPhone5，这里只是举个栗子）上却出现页面不适配的问题，如图1-2。但是在手机真机iPhone5上并没有出现出现网页变形的问题，如图1-3。

图1-2

图1-3

为了测试，我分别在火狐浏览器和360浏览器上打开这个页面，发现和手机真机打开的页面一样，没有变形。由此推测，是谷歌浏览器的问题。然后，我反复查看代码，发现在谷歌模拟器上iphone6 plus（分辨率为414）的页面的根字体大小为10.35px，而谷歌浏览器支持的最小字体为12px，显然，这是设置根字体大小设置的太小的问题。那么现在只要把根字体大小设置的大于或者等于12px就可以了。如图1-4。

图1-4

因为之前计算根字体大小是将设备的宽度除以40，这样得到的根字体大小在414屏幕的时候就小于12px，现在将除以40改成除以20，这样在最小手机屏幕320的时候根字体大小也大于12px（即16px）。现在进行页面调整，之前除以40的时候，css里面的px转换成rem要除以16，现在转换就要除以32。调整后的页面如下图1-5。

图1-5

谷歌浏览器支持的最小字体为12px，要注意。