目标：解决移动端界面适配问题

 

观点：一、不同像素比的设备上的文字呈现出来的大小应该是一致的 

         二、ios设备的设备像素比分为1，2；android设备的设备像素比都为1

         三、以540为基准宽度，以width/10为根源素fontsize

         四、图片采用2x以上的

解决方案：

        一：将1/dpr设置为缩放比例且body上的fontsize设置为12*dpr，这样就能保证字体在不同设备像素比的设备字体一致

        二：都是经验之谈，减少不必要的工作量

        三：这个540其实是个经验值，或者最大值，这个经验是怎么得出来的呢？
目前主流手机最大的css像素尺寸，是540（比如devicePixelRatio为2，分辨率是1080x1920的手机），所以用了这个经验值。这样可以让在ipad横屏这种情况下浏览无线页面，不至于因为拉伸适配后体验太差。
换句话说，这个540像素值是手机屏幕能到达的最大宽度（在考虑dpr以后），如果有宽度超过540的情况，则说明该网页被显示在 dpr超过1的大屏安卓机、ipad、PC端上。这时候，就使用540这个宽度（代码里是dpr*540，除了iPhone不会有dpr超过1的情况出现，所以基本上就是540）作为默认宽度。然后将屏幕宽度除以10作为rem值（模拟vw/vh实现），应用在document元素上，并且将计算得到的rem值输出到全局变量以供调用。

       四：由于ios端dpr的值为2所以物理像素/css像素的值为2，意味者1个css占据一4个物理像素，一个CSS像素点实际分成了四个，这样就造成了颜色只能近似选取，于是，我们看上去就变得模糊了，反之位图图像质量是由单位长度内像素的多少来决定的。单位长度内像素越多，分辨率越高，图像的效果越好，所以要采用2x以上的图片。

 

其他：设置user-scalable=no在手机浏览器上面并不能生效，webview可以生效

         脚本禁止用户手动缩放：

     

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1)event.preventDefault();
}, false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300)event.preventDefault();
    lastTouchEnd = now;
}, false);