【实用】【移动端】Retain屏1px解决方案

新浪微博HTML5版

微博的实现方式(rem + 小数px)

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

!function(e){var a,i=navigator.userAgent.toLowerCase(),n=document.documentElement,t=parseInt(n.clientWidth);if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)||i.indexOf("like mac os x")>0){var s=/os [d._]*/gi,o=i.match(s);a=(o+"").replace(/[^0-9|_.]/gi,"").replace(/_/gi,".")}var r=a+"";"undefined"!=r&&r.length>0&&(a=parseInt(r),a>=8&&(375==t||667==t||320==t||568==t||480==t)?n.className="iosx2":(a>=8&&414==t||736==t)&&(n.className="iosx3")),/(Android)/i.test(navigator.userAgent)&&(n.className="android")}(window);

通过以上js，判断是1x、2x、3x的设备，然后在html根元素上设置对应的className

/* 普通屏 */
.android .lite-topbar {
    border-top- 0;
    border-right- 0;
    border-bottom- 1px;
    border-left- 0;
    border-color: transparent;
    border-style: solid;
}
/* 2x屏 */
.iosx2 .lite-topbar {
    border-image: none;
    border-top- 0;
    border-right- 0;
    border-bottom- .5px;
    border-left- 0;
}
/* 3x屏 */
.iosx3 .lite-topbar {
    border-image: none;
    border-top- 0;
    border-right- 0;
    border-bottom- .35714px;
    border-left- 0;
}

淘宝、饿了么

淘宝和饿了么的实现方式(rem + 动态修改meta)

<!-- 普通屏 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 2x屏 -->
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<!-- 3x屏 -->
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

由于viewport(视窗)变为原来的2x或者3x，所以html的fontSize也要随着变为原来的2x或者3x。

2x屏：原来的1dpr = 2px 当视窗变为2倍时，也就变成了 1dpr = 1px
3x屏：原来的1dpr = 3px 当视窗变为3倍时，也就变成了 1dpr = 1px