起因

最近一个月都在准备校招，所以没什么时间写博客。今天想写的问题来自于网易一面的时候，面试官问我如何在移动端的页面上画一条1px的线。这个问题我模糊地记得之前看过相关文章，但是我清楚地记得当时自己脑子一片空白。是的，一面挂了，但是这个问题一直在我回来的路上不断想起，所以今天我就要解决这个问题，来看看有什么解决方案吧～

动态改变viewport的缩放

这是淘宝的flexible提出的解决方案，其核心就是根据window.devicePixelRatio（dpr）的值动态改变viewport的缩放，核心代码如下（有删减）：

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 >= 3 && (!dpr || dpr >= 3)) {                            dpr = 3;        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){            dpr = 2;        } else {            dpr = 1;        }    } else {        // 其他设备下，仍旧使用1倍的方案        dpr = 1;    }    scale = 1 / 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);    }}

这个方案只对iOS的Retina屏幕做了处理，而没有管安卓的Retina屏幕，原因可以看《》这篇文章。使用了flexible之后直接写1px就能实现效果，但是最新的2.0好像放弃了这种缩放的方案，对于1px的处理则变成了border-image或者background-image，详细的可以看《》。

这里再简单谈一下这种viewport缩放的原理：

首先一开始写移动端的时候，我是直接加一个meta标签 <meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">，这个meta标签使得页面宽度等于设备宽度，页面的缩放默认为1，且用户不能缩放，后来看到一篇文章讲viewport计算是这样的：

viewport的默认宽度是980px；设置了initial-scale则宽度是device-width/initial-scale；设置了width则宽度等于width的值；同时设置了initial-scale和width则宽度取两者中较大的一个。

上面的结论我在PC端谷歌浏览器的设备模拟器里证实了有效，但是安卓和iOS真机并没有试过。

transform: scale(0.5)

这个方案也是WeUI正在用的，核心思想是使用transform的scale来整体缩放，如果你想画一条1px的线，就可以直接用

div {    height: 1px;      background: #000;      transform: scaleY(0.5);      transform-origin: 0 0;}

理论上在dpr为2时就是scaleY(0.5)，在dpr为3时就是scaleY(0.333)，但是我注意到WeUI并没有针对其他dpr的做特殊处理，可能是因为在iPhone6（dpr=2）和iPhone6 Plus（dpr=3）中看起来差别不大吧。

如果你想给一个元素加一个1px的边框可以利用到伪元素，在这个方案下边框加圆角也很容易实现，具体代码如下：

div:after {  content: " ";  width: 78px;  height: 38px;  border-radius: 4px;  border: 1px solid #000;  transform: scale(0.5, 0.5);  transform-origin: 0 0;  position: absolute;}

其他方案

border-image

这种是AlloyTeam的《》这篇文章上看到的，代码写起来挺简单，但是要自己制作图片，而且圆角也不好弄，如果改了颜色就要对图片处理，所以不是很好的方案。

box-shadow

这个颜色不好弄，所以效果也不是很好。

div {  border: none;  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);}

0.5px解决方案

div {    border: 1px solid #000;}@media (-webkit-min-device-pixel-ratio: 2) {  div {    border: .5px solid #000;  }}

安卓和iOS7之前版本碰到0.5px直接就解析成0px了，但是这一特性也是可以利用的，在最新的flexible中就有对0.5px进行判断的代码：

// detect 0.5px supportsif (dpr >= 2) {  var fakeBody = document.createElement('body')  var testElement = document.createElement('div')  testElement.style.border = '.5px solid transparent'  fakeBody.appendChild(testElement)  docEl.appendChild(fakeBody)  if (testElement.offsetHeight === 1) {    docEl.classList.add('hairlines')  }  docEl.removeChild(fakeBody)}

小结

这篇文章从国庆开始断断续续地写，到最后一天总算是写完了，这段时间整个人心态经历了一些变化，主要表现在对待技术比以前更加踏实了，无论如何希望自己能坚持写博客，坚持学习前端，相信总能找到一个理想的工作的，加油！