【實用】【移動端】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-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-color: transparent;
    border-style: solid;
}
/* 2x屏 */
.iosx2 .lite-topbar {
    border-image: none;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: .5px;
    border-left-width: 0;
}
/* 3x屏 */
.iosx3 .lite-topbar {
    border-image: none;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: .35714px;
    border-left-width: 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