移动端Retina屏boder 1px显示为2px或3px的解决方法

我们在开发移动端web项目时经常遇到设置border:1px，但是显示的边框却为2px或是3px粗细，这是因为设备像素比devicePixelRatio为2或3引起的。

何为“设备像素比devicePixelRatio”

设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是：window.devicePixelRatio = 物理像素 / dips dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

所有非视网膜屏幕的iphone在垂直的时候，宽度为320物理像素。当你使用<meta name="viewport" content="width=device-width">的时候，会设置视窗布局宽度（不同于视觉区域宽度，不放大显示情况下，两者大小一致，见下图）为320px, 于是，页面很自然地覆盖在屏幕上。这样，非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1.

而对于视网膜屏幕的iphone，如iphone4s, 纵向显示的时候，屏幕物理像素640像素。同样，当用户设置<meta name="viewport" content="width=device-width">的时候，其视区宽度并不是640像素，而是320像素，这是为了有更好的阅读体验 – 更合适的文字大小。
这样，在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.

每个像素点实际上有4倍的普通像素点，如下示意(© smashingmagazine)：

1个CSS像素点实际上有4个位图像素点，1个分成4个，显然不够分啊，只能颜色近似选取，于是，图片感觉就是模糊的(© smashingmagazine)！。这就是为什么使用两倍图。

视网膜屏幕下图片就显示OK了（非视网膜屏幕图片被压缩-减少像素取样——资源浪费！）

在retina屏下面，如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
你将永远无法写出1px宽度的东西，除此之外，inline的SVG等元素，也会按照逻辑像素来渲染，整个页面的清晰度会打折；

百度糯米的实现：

 @media only screen and (-webkit-min-device-pixel-ratio:),only screen and (min-device-pixel-ratio:) {

     .normal-goods .good-content {

     border: none;

     background-image: -webkit-linear-gradient(90deg,#e0e0e0,#e0e0e0 %,transparent %);

     background-image: -moz-linear-gradient(90deg,#e0e0e0,#e0e0e0 %,transparent %);

     background-image: -o-linear-gradient(90deg,#e0e0e0,#e0e0e0 %,transparent %);

     background-image: linear-gradient(,#e0e0e0,#e0e0e0 %,transparent %);

     background-size: % 1px;

     background-repeat: no-repeat;

     background-position: bottom

     }

 }

大众点评的实现：

 .index-rec .home-tuan-list .cnt {

     padding: 7px 10px 10px ;

     display: box;

     display: -webkit-box;

     display: -ms-flexbox;

     height: 78px;

     background-image: url(//www.dpfile.com/mod/app-m-style/1.7.2/css/img/repeat-x.png);

     background-repeat: repeat-x;

     background-position:  bottom;

     background-size: auto 1px

 }

微信WeUI的实现：

 .weui_grid:before {

     content: " ";

     position: absolute;

     right: ;

     top: ;

     width: 1px;

     height: %;

     border-right: 1px solid #D9D9D9;

     color: #D9D9D9;

     -webkit-transform-origin:  %;

     transform-origin:  %;

     -webkit-transform: scaleX(0.5);

     transform: scaleX(0.5);

     right: -1px;

 }

 .weui_grid:after {

     content: " ";

     position: absolute;

     left: ;

     bottom: ;

     width: %;

     height: 1px;

     border-bottom: 1px solid #D9D9D9;

     color: #D9D9D9;

     -webkit-transform-origin:  %;

     transform-origin:  %;

     -webkit-transform: scaleY(0.5);

     transform: scaleY(0.5);

 }

阿里的实现：

js:

 <script>

     if (/iP(hone|od|ad)/.test(navigator.userAgent)) {  //  就是放到html根节点上的   ios8现在普及率高了，可以省略

         var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/), version = parseInt(

                 v[], );

         if (version >= ) {

             document.documentElement.classList.add('hairlines')

         }

     };

 </script>

css:

 .r1bt {

     border-top: 1px solid rgba(,,,.)

 }

 .r1bb {

     border-bottom: 1px solid rgba(,,,.)

 }

 .r1bl {

     border-left: 1px solid rgba(,,,.)

 }

 .r1br {

     border-right: 1px solid rgba(,,,.)

 }

 .r1b {

     border: 1px solid rgba(,,,.)

 }

 .hairlines .r1bt,.hairlines .r1bb,.hairlines .r1bl,.hairlines .r1br,.hairlines .r1b {

     border-width: .5px!important

 }

阿里的另一种实现：

 /*Retian 1px border start */

 .retinabt,.retinabb,.retinabl,.retinabr,.retinab{position:relative;}

 .retinabt:before,.retinabb:after{pointer-events:none;position:absolute;content:"";height:1px;background:rgba(,,,.);left:;right:;z-index:;}

 .retinabt:before{top:;z-index:;}

 .retinabb:after{bottom:;z-index:;}

 .retinabl:before,.retinabr:after{pointer-events:none;position:absolute;content:"";width:1px;background:rgba(,,,.);top:;bottom:}

 .retinabl:before{left:;z-index:;}

 .retinabr:after{right:;z-index:;}

 .retinab:after{position:absolute;content:"";top:;left:;-webkit-box-sizing:border-box;box-sizing:border-box;width:%;height:%;border:1px solid rgba(,,,.);pointer-events:none;z-index:;}

 @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:144dpi),(min-resolution:.5dppx){

 .retinabt:before,.retinabb:after{-webkit-transform:scaleY(.);transform:scaleY(.) }

 .retinabl:before,.retinabr:after{-webkit-transform:scaleX(.);transform:scaleX(.) }

 .retinab:after{width:%;height:%;-webkit-transform:scale(.);transform:scale(.) }

 .retinabt:before,.retinabl:before,.retinab:after{-webkit-transform-origin: ;transform-origin: }

 .retinabb:after,.retinabr:after{-webkit-transform-origin:% %;transform-origin:% %}

 }

 @media (-webkit-device-pixel-ratio:1.5){

 .retinabt:before,.retinabb:after{-webkit-transform:scaleY(.);transform:scaleY(.) }

 .retinabl:before,.retinabr:after{-webkit-transform:scaleX(.);transform:scaleX(.)}

 .retinab:after{width:%;height:%;-webkit-transform:scale(.);transform:scale(.) }

 }

 @media (-webkit-device-pixel-ratio:){

 .retinabt:before,.retinabb:after{-webkit-transform:scaleY(.);transform:scaleY(.)}

 .retinabl:before,.retinabr:after{-webkit-transform:scaleX(.);transform:scaleX(.)}

 .retinab:after{width:%;height:%;-webkit-transform:scale(.);transform:scale(.)}

 }

 @media (-webkit-min-device-pixel-ratio:),(min-device-pixel-ratio:){

 .retinabt:before,.retinabb:after{-webkit-transform:scaleY(.);transform:scaleY(.)}

 .retinabl:before,.retinabr:after{-webkit-transform:scaleX(.);transform:scaleX(.)}

 .retinab:after{width:%;height:%;-webkit-transform:scale(.);transform:scale(.)}

 }

 /*Retina 1px border end */

美团的实现：

 <script type="text/javascript">

         //根据屏幕大小及dpi调整缩放和大小

         (function() {

             var scale = 1.0;

             var ratio = ;

             if (window.devicePixelRatio >= ) {

                 scale *= 0.5;

                 ratio *= ;

             }

             var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';

             document.write(text);

             document.documentElement.style.fontSize = *ratio + "px";

         })();

     </script>

我们把美团的拷贝过来使用，发现安卓自带的浏览器（app内嵌h5不得不考虑）有的不兼容开始整体字体放大，应该是没有正确获取设备的实际宽度，（手头没有那么多安卓测试手机，主要是自带浏览器出现问题），不知到美团怎么处理的，我想到的用这个 target-densittydpi=device-dpi hack下；是可以的或者加个计时器延迟 50毫秒获取设备的正确实际宽度；

 <meta name="viewport" content="target-densitydpi=device-dpi">  <!--安卓自带的 device-width 先不加 否则iphone 随进线条出现问题 -->

 <script>

 +function(win,doc,undefined) {//根据屏幕大小及dpi调整缩放和大小

     var scale = 1.0,ratio = ,dc=doc,viewporttexts='';

     if (win.devicePixelRatio && devicePixelRatio >= 1.5) {

         ratio = devicePixelRatio;

         scale = scale/(devicePixelRatio);

     }

     //var texts = '<meta  name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';

     // dc.write(texts);

       viewporttexts = ' width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ',user-scalable=no';

       doc.querySelector('meta[name="viewport"]').setAttribute("content",viewporttexts);

        console.log('');

       dc.documentElement.style.fontSize =doc.getElementsByTagName("html")[].style.fontSize=Math.ceil(*ratio) + "px";

 }(window,document);

  </script>

设计坞官网https://www.wode007.com/sites/73738.html

淘宝的实现：

 ;(function(win, lib) {

     var doc = win.document;

     var docEl = doc.documentElement;

     var metaEl = doc.querySelector('meta[name="viewport"]');

     var flexibleEl = doc.querySelector('meta[name="flexible"]');

     var dpr = ;

     var scale = ;

     var tid;

     var flexible = lib.flexible || (lib.flexible = {});

     if (metaEl) {

         console.warn('将根据已有的meta标签来设置缩放比例');

         var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);

         if (match) {

             scale = parseFloat(match[]);

             dpr = parseInt( / scale);

         }

     } else if (flexibleEl) {

         var content = flexibleEl.getAttribute('content');

         if (content) {

             var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);

             var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);

             if (initialDpr) {

                 dpr = parseFloat(initialDpr[]);

                 scale = parseFloat(( / dpr).toFixed());

             }

             if (maximumDpr) {

                 dpr = parseFloat(maximumDpr[]);

                 scale = parseFloat(( / dpr).toFixed());

             }

         }

     }

     if (!dpr && !scale) {

         var isAndroid = win.navigator.appVersion.match(/android/gi);

         var isIPhone = win.navigator.appVersion.match(/iphone/gi);

         var devicePixelRatio = win.devicePixelRatio;

         if (isIPhone) {

             // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案

             if (devicePixelRatio >=  && (!dpr || dpr >= )) {

                 dpr = ;

             } else if (devicePixelRatio >=  && (!dpr || dpr >= )){

                 dpr = ;

             } else {

                 dpr = ;

             }

         } else {

             // 其他设备下，仍旧使用1倍的方案

             dpr = ;

         }

         scale =  / dpr;

     }

     docEl.setAttribute('data-dpr', dpr);

     if (!metaEl) {

         metaEl = doc.createElement('meta');

         metaEl.setAttribute('name', 'viewport');

         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

         if (docEl.firstElementChild) {

             docEl.firstElementChild.appendChild(metaEl);

         } else {

             var wrap = doc.createElement('div');

             wrap.appendChild(metaEl);

             doc.write(wrap.innerHTML);

         }

     }

     function refreshRem(){

         var width = docEl.getBoundingClientRect().width;

         if (width / dpr > ) {

             width =  * dpr;

         }

         var rem = width / ;

         docEl.style.fontSize = rem + 'px';

         flexible.rem = win.rem = rem;

     }

     win.addEventListener('resize', function() {

         clearTimeout(tid);

         tid = setTimeout(refreshRem, );

     }, false);

     win.addEventListener('pageshow', function(e) {

         if (e.persisted) {

             clearTimeout(tid);

             tid = setTimeout(refreshRem, );

         }

     }, false);

     if (doc.readyState === 'complete') {

         doc.body.style.fontSize =  * dpr + 'px';

     } else {

         doc.addEventListener('DOMContentLoaded', function(e) {

             doc.body.style.fontSize =  * dpr + 'px';

         }, false);

     }

     refreshRem();

     flexible.dpr = win.dpr = dpr;

     flexible.refreshRem = refreshRem;

     flexible.rem2px = function(d) {

         var val = parseFloat(d) * this.rem;

         if (typeof d === 'string' && d.match(/rem$/)) {

             val += 'px';

         }

         return val;

     }

     flexible.px2rem = function(d) {

         var val = parseFloat(d) / this.rem;

         if (typeof d === 'string' && d.match(/px$/)) {

             val += 'rem';

         }

         return val;

     }

 })(window, window['lib'] || (window['lib'] = {}));

用rem写1px 维护行方便；图片高度可以用rem固定高度，防止加载时出现高度自动网速加载慢导致的明显塌陷；　缺点: 动态控制 viewport retina下，无论美团还是淘宝用 rem始终还有许多细小的问题；在ios上浏览器打开仔细看还是看的出的，安卓上没看出来；

有时候retina下， viewport 缩放动态控制字体大小；<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 竖线或者奇数偶数行横线或者动态添加显示的元素之后的1px线条，有的1.1px 或者1.2px等等...拿手机仔细看下，观察iphone5 以及iphone6 safari以及其他浏览器对比下就知道，以下是截图出来问题的（只是示范一下红色箭头的 border 线条），同样都是像素比 ratio=2 真机上细看还是明显的。

H5 Canvas Retina屏幕处理的1px的函数

 /**

  * HiDPI Canvas Polyfill (1.0.9)

  *

  * Author: Jonathan D. Johnson (http://jondavidjohn.com)

  * Homepage: https://github.com/jondavidjohn/hidpi-canvas-polyfill

  * Issue Tracker: https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues

  * License: Apache 2.0

 */

 ;(function(prototype) {

     var pixelRatio = (function(context) {

             var backingStore = context.backingStorePixelRatio ||

                         context.webkitBackingStorePixelRatio ||

                         context.mozBackingStorePixelRatio ||

                         context.msBackingStorePixelRatio ||

                         context.oBackingStorePixelRatio ||

                         context.backingStorePixelRatio || ;

             return (window.devicePixelRatio || ) / backingStore;

         })(prototype),

         forEach = function(obj, func) {

             for (var p in obj) {

                 if (obj.hasOwnProperty(p)) {

                     func(obj[p], p);

                 }

             }

         },

         ratioArgs = {

             'fillRect': 'all',

             'clearRect': 'all',

             'strokeRect': 'all',

             'moveTo': 'all',

             'lineTo': 'all',

             'arc': [,,],

             'arcTo': 'all',

             'bezierCurveTo': 'all',

             'isPointinPath': 'all',

             'isPointinStroke': 'all',

             'quadraticCurveTo': 'all',

             'rect': 'all',

             'translate': 'all',

             'createRadialGradient': 'all',

             'createLinearGradient': 'all'

         };

     if (pixelRatio === ) return;

     forEach(ratioArgs, function(value, key) {

         prototype[key] = (function(_super) {

             return function() {

                 var i, len,

                     args = Array.prototype.slice.call(arguments);

                 if (value === 'all') {

                     args = args.map(function(a) {

                         return a * pixelRatio;

                     });

                 }

                 else if (Array.isArray(value)) {

                     for (i = , len = value.length; i < len; i++) {

                         args[value[i]] *= pixelRatio;

                     }

                 }

                 return _super.apply(this, args);

             };

         })(prototype[key]);

     });

      // Stroke lineWidth adjustment

     prototype.stroke = (function(_super) {

         return function() {

             this.lineWidth *= pixelRatio;

             _super.apply(this, arguments);

             this.lineWidth /= pixelRatio;

         };

     })(prototype.stroke);

     // Text

     //

     prototype.fillText = (function(_super) {

         return function() {

             var args = Array.prototype.slice.call(arguments);

             args[] *= pixelRatio; // x

             args[] *= pixelRatio; // y

             this.font = this.font.replace(

                 /(\d+)(px|em|rem|pt)/g,

                 function(w, m, u) {

                     return (m * pixelRatio) + u;

                 }

             );

             _super.apply(this, args);

             this.font = this.font.replace(

                 /(\d+)(px|em|rem|pt)/g,

                 function(w, m, u) {

                     return (m / pixelRatio) + u;

                 }

             );

         };

     })(prototype.fillText);

     prototype.strokeText = (function(_super) {

         return function() {

             var args = Array.prototype.slice.call(arguments);

             args[] *= pixelRatio; // x

             args[] *= pixelRatio; // y

             this.font = this.font.replace(

                 /(\d+)(px|em|rem|pt)/g,

                 function(w, m, u) {

                     return (m * pixelRatio) + u;

                 }

             );

             _super.apply(this, args);

             this.font = this.font.replace(

                 /(\d+)(px|em|rem|pt)/g,

                 function(w, m, u) {

                     return (m / pixelRatio) + u;

                 }

             );

         };

     })(prototype.strokeText);

 })(CanvasRenderingContext2D.prototype);

 ;(function(prototype) {

     prototype.getContext = (function(_super) {

         return function(type) {

             var backingStore, ratio,

                 context = _super.call(this, type);

             if (type === '2d') {

                 backingStore = context.backingStorePixelRatio ||

                             context.webkitBackingStorePixelRatio ||

                             context.mozBackingStorePixelRatio ||

                             context.msBackingStorePixelRatio ||

                             context.oBackingStorePixelRatio ||

                             context.backingStorePixelRatio || ;

                 ratio = (window.devicePixelRatio || ) / backingStore;

                 if (ratio > ) {

                     this.style.height = this.height + 'px';

                     this.style.width = this.width + 'px';

                     this.width *= ratio;

                     this.height *= ratio;

                 }

             }

             return context;

         };

     })(prototype.getContext);

 })(HTMLCanvasElement.prototype);

viewport + REM的方式来实现：

在devicePixelRatio = 2 时，输出viewport

 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，输出viewport

 <meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

代码:

 <script type="text/javascript">

   (function() {

     var value=;

     if (window.devicePixelRatio == ) {

       value=0.5;

     }else if(window.devicePixelRatio == ){

         value=0.333333333333333;

     }

     var text = '<meta name="viewport" content="initial-scale=' + value + ', maximum-scale=' + value +', minimum-scale=' + value + ', width=device-width, user-scalable=no" />';

     document.write(text);

   })();

 </script>

同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。

需要使用rem,我们需要设置根的font-size。