原因是最近一个月一直在准备校招，所以没有太多时间写博客。今天想写的题目从网易过来的时候，面试官问我移动端页面怎么画1px的线。依稀记得之前看过这道题的相关文章，但清楚的记得当时脑子一片空白。是的，一面挂了，但是这个问题一直在我回来的路上，所以今天就解决这个问题，看看有没有办法解决~动态改变视口的缩放这是淘宝灵活提出的解决方案的解决方案的核心是根据window.devicePixelRatio(dpr)的值动态改变viewport的缩放比例。核心代码如下（有删减）：varisIPhone=win.navigator.appVersion.match(/iphone/gi);vardevicePixelRatio=win.devicePixelRatio;if(isIPhone){//在iOS下，对于2屏和3屏，使用两倍的方案，其余使用1x方案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2;}否则{dpr=1;}}else{//在其他设备下，仍然使用1-fold方案dpr=1;}scale=1/dpr;}if(!metaEl){metaEl=doc.createElement('meta');metaEl.setAttribute('名称','视口');metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scalee+',user-scalable=no');如果(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEl);}else{varwrap=doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}这个解决方案只处理iOS的Retina屏幕，不处理Android的Retina屏幕。原因可以看这篇文章《再谈Retina下1px的解决方案》，使用flexibleeffect后直接写1px就可以实现，但是最新的2.0好像放弃了这种缩放方案，1px的处理变成了border-image或者background-图片，详见《再聊移动端页面的适配》。这里简单说一下这个视口缩放的原理：首先，我在第一次写移动端的时候，直接加了一个meta标签，这个meta标签让页面宽度等于设备宽度，页面缩放默认为1，用户不能缩放。后来看到一篇文章说视口的计算是这样的：视口的默认宽度是980px；如果设置了initial-scale，则宽度将为device-width/initial-scale；如果设置了宽度，则宽度将等于宽度的值；如果同时设置了initial-scale和width，则宽度将是两者中较大的一个。以上结论我在PC端的谷歌浏览器的设备模拟器中验证过，但是我没有在安卓和iOS真机上试过。transform:scale(0.5)也被WeUI使用。核心思想是利用尺度transform对整体进行尺度缩放。如果要绘制1px的直线，可以直接使用div{height:1px;背景：#000；变换：缩放Y（0.5）；transform-origin:00;}理论上dpr为2的时候就是scaleY(0.5)，dpr为3的时候就是scaleY(0.333)，但是我注意到WeUI并没有对其他dpr做特殊处理，可能是因为它在iPhone6（dpr=2）和iPhone6Plus（dpr=3）中看起来差别不大。如果要为元素添加1px的边框，可以使用伪元素。在这个方案中，给边框加上圆角也很容易实现。具体代码如下：div:after{content:"";宽度：78px；高度：38px；边界半径：4px；边框：1px实心#000；变换：比例（0.5，0.5）；变换原点：00；文中可以看到，代码写起来挺简单的，但是图片得自己做，圆角不好做。如果改变颜色，就得对图片进行处理，所以不是一个好的解决方案。box-shadow的颜色不好弄，所以效果不是很好。div{边框：无；box-shadow:01px1px-1pxrgba(0,0,0,0.5);}0.5pxsolutiondiv{border:1pxsolid#000;}@media(-webkit-min-device-pixel-ratio:2){div{border:.5pxsolid#000;}}Android和iOS7之前的版本遇到0.5px会直接解析成0px，不过在最新的flexible中也可以使用这个功能有一段代码可以判断0.5px：//detect0.5pxsupportsif(dpr>=2){varfakeBody=document.createElement('body')vartestElement=document.createElement('div')testElement.style.border='.5pxsolidtransparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if(testElement.offsetHeight===1){docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}这篇文章从国庆开始就断断续续的写了，最后一天终于写完了。这段时间，我的心态发生了一些变化。主要表现是我对技术比以前更加踏实了。不管怎样，我希望自己能继续写博客，不断学习。前端，相信你总能找到理想的工作，加油！
