【移动端】基于rem实现手机端页面自适应--动态改变dpr和font-size

这两天还是在写手机端的那个表单页面，我好苦恼啊。明明在chrome上调试的时候都是可以的，但是真的用手机去扫码看的时候，就出现问题了。
苹果手机么有问题，都是根据dpr来设置meta标签，动态设置font-size，显示的跟预期的一样。用三星手机扫也是可以的，但是当我用小米4扫的时候，就有问题了。表单宽度和高度都有所缩小，内容显示不全。
我搜了一下，网上有说 米4的dpr也是3.
于是我就自己写js，想通过自己写来实现不同分辨率的适配，思路是这样的:

如果是苹果手机，scale = 1/dpr;font-size = deviceWidth * dpr /10
如果是安卓手机，则dpr = 1；

代码如下

var deviceWidth = document.documentElement.clientWidth;//设备css像素宽
var isIPhone = window.navigator.appVersion.match(/iPhone/gi);//判断设备是不是iPhone
if (isIPhone) {
    alert("iPhone");
    dpr = window.devicePixelRatio;
    width = deviceWidth * dpr;
    scale = 1/dpr;
    fontSize = width/10;    
    window.document.documentElement.style.fontSize = fontSize + 'px';
}else {
    alert("andrio")
    scale = 1;
    fontSize = deviceWidth/10;
    dpr = 1 ;
    window.document.documentElement.style.fontSize = fontSize + 'px';
}
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
var docEl = window.document.documentElement;
docEl.setAttribute('data-dpr', dpr);

其实思路跟淘宝的flexible是一样的。我想通过var isIPhone = window.navigator.appVersion.match(/iPhone/gi); 来判断设备是不是苹果设备。

奇怪的是，我用米4扫的时候，竟然弹出框也是显示iPhone 。

反复写反复写，今天的收获就是，window.navigator.appVersion 可以知道设备是不是苹果手机；
document.documentElement.clientWidth 可以获得设备宽度；
window.devicePixelRatio;可以获得设备dpr 。

问题最终还是没有完美解决，继续研究。