移动端1px边框线在iPhone6，iPhone7中变粗的处理方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mhlghy/article/details/72877236

开发过移动端页面的朋友都知道，在代码头部应该加入这样一句话：

<meta name="viewport" content = "width=device-width,initial-scale = 1,maximum-scale = 1,minimum-scale = 1,user-scaleble = no">

注：
1.initial-scale：设置网页初始时候的大小
2.maximum-scale：设置网页最大放大多少
3.minimum-scale：设置网页最小缩小多少
4.user-scaleble：是否允许用户放大或缩小网页，no为不允许

然而，在开发过程中，1px的底部边框在安卓上显示正常，在iPhone6中看起来比1px粗，这是因为手机分辨率比较大，导致一个像素由几个点组成，那么，我们就需要动态生成meta标签插入头部来处理这个问题。

<script>
        var metaEl = document.createElement('meta');
        var scale = isRetina ? 0.5 : 1 ;
        metaEl.setAttribute('name','viewport');
        metaEl.setAttribute('content','initial-scale='+ scale +',maximum-scale='+ scale +',minimum-scale = '+ scale +',user-scaleble = no');
        if(document.documentElement.firstElementChild) {
            document.documentElement.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = document.createElement('div');
            wrap.appendTo('metaEl');
            document.write(wrap.innerHTML);
        }
    </script>

然而，iPhone6和iPhone7又不一样，那我们就可以根据缩放比例将scale变为0.3或0.5,。
如上是手机淘宝的处理方式，朋友们若有其他的方式，欢迎互动交流。

每天进步一点点！！！