移动端rem定位不准确的解决

问题出现

在项目中使用rem进行适配，在大部分机型上都没有问题，但是在某些机型上却出现了百分比的适配正确，rem的适配明显出现错误，导致出现横向滚动条或者图标叠起来的问题。

问题排查

拿到代码后重新跑了几遍发现通过js算出的font-size值应该是正确的，添加到元素的时候也是正确的，那哪里会出问题呢？打印了很多获取值之后加上搜索大家遇到的问题，发现了这篇文章，里面的情况和我的很相似，于是尝试着alert了两个值，一个是document.documentElement.style.fontSize一个是 window.getComputedStyle(document.documentElement)['font-size']发现值确实不同，而且有较大的区别，那就明白了解决方法应该是重新去定义一遍font-size的值。

问题解决

首先要明白document.documentElement.style.fontSize 这个值是我们赋给元素的值，而window.getComputedStyle(document.documentElement)['font-size']是渲染之后拿到的实际上的font-size值，我们的目标应该是让后面这个值尽可能的等于我们一开始想要给他设定的值。这个转换要怎么做呢？
我选择的做法与链接中的方法相同，在第一次赋值font-size之后利用插入一个宽度为1rem的元素，然后用getComputedStyle来获取他的实际宽度（px），那么得到的值就是1rem渲染时对应的像素值。
要得到实际上需要设置的font-size值只需要用
最初希望设定的font-size值的平方/1rem实际对应的像素值
然后将这个值重新赋给元素就行。

问题总结

实际渲染在移动端其实是会和直接设定的值有所出入。这个点在之后要多注意。