一、問題
寫H5的樣式時候，設置元素的邊框為1px,不幸的事情在IOS設備上發生了，設計師會說，咦，邊框怎么那么大，這是2px了吧？改成1px。我明明設置成1px了啊。
二、為什么邊框變粗了？
IOS使用的是retina屏，因為Retine屏的分辨率始終是普通屏幕的2倍，1px的邊框在devicePixelRatio=2的retina屏下會顯示成2px。所系css設置1px的樣式，實際是2px的效果。
devicePixelRatio的官方定義：”設備物理像素和設備獨立像素的比例，也就是devicePixelRatio = 物理像素 / 獨立像素。”
獲取devicePixelRatio方法：
在JavaScript中，可以通過window.devicePixelRatio獲取到當前設備的devicePixelRatio。而在CSS中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同devicePixelRatio的設備，做一些樣式適配。
要真正理解為什么retina屏有這樣的特性，首先要涉及一些基本概念，viewport、物理像素(physical pixel)、設備獨立像素(density-independent pixel)、CSS像素、屏幕密度、設備 素比(device pixel ratio)，具體原因可以看《使用Flexible實現手淘H5頁面的終端適配 》。
三、畫出真正的1px邊框
1、使用viewport 加 rem
目前我們H5也是采用的是手淘的Flexible解決方案來適配不同的終端。根據設計稿結合less使用rem作
為單位，基本上能完成一般終端的設配。后面遇到一個問題，當設計稿給出的元素邊框為1~2px的
時候，一開始直接轉換成rem,后來在某些設備上，元素根本沒有顯示邊框。解決的方案一般是， 針對1px的邊框，直接使用1px作為單位就好了。
2、0.5px?
在IOS8以上可以使用，以下就不可以了。可以用js去判斷是否支持0.5px的邊框，不可以繼續找其他方法？麻煩。
3、trasform:scale(0.5);
//html
<p></p>
//css 單邊框
div{
height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
background: #000;
}
//多邊框
div{
position: relative;
}
div:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #000;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}
vux這個ui庫就是使用這個方法
4、box-shadow
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
很明顯這種，顏色不好控制啊。
5、background-image
利用漸變 linear-gradient (50%有顏色，50%透明)；這方法也是醉醉的。
如果h5采用看手淘的flexible，那么推薦使用方法1；
如果沒有，建議使用方法3；