原因：
因為Retine屏的分辨率始終是普通屏幕的2倍，1px的邊框在devicePixelRatio=2的retina屏下會顯示成2px。
但在IOS8中，已經支持0.5px了，那就意味着, 在devicePixelRatio=2的時候，我們可以使用如下的css：
div{ border:1px solid #000; } @media (-webkit-min-device-pixel-ratio: 2) { div{ border:0.5px solid #000; } }
但在ios7以下，android等其他系統里，0.5px會被顯示為0px，所以需要寫hack來兼容舊版本的系統。
有兩種方案：
1、JS判斷瀏覽器版本，是否是IOS8+，是的話則加上hairlines的類名，加在head里即可。
CSS代碼：
div{ border:1px solid #000 } .hairlines div{ border-width:0.5px }
JS代碼：
if (window.devicePixelRatio && devicePixelRatio >= 2) {
document.querySelector('body').classList.add('hairlines')
}
2、JS判斷是否支持0.5px的邊框，是的話，則加上hairlines的類名。（代碼放在body內）
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid #000';
document.body.appendChild(testElem);
//當div存在
if (testElem.offsetHeight == 1){
document.querySelector('html').classList.add('hairlines');
}
//添加完hairlines類名后，則刪除div
document.body.removeChild(testElem);
}
將代碼放在body內會有一些重繪，第一種方法會更好一些。
當然這些方法，只能兼容IOS7包括IOS7以上的機器，但如果想兼容其他機器怎么辦呢？這塊我就要細細道來...
在retina屏下面，如果你寫了這樣的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 你將永遠無法寫出1px寬度的東西。
關於CSS像素和物理像素的定義，這個文章里有詳細的介紹 走向視網膜（Retina）的Web時代。
在 viewport 中, 因為設置了initial-scale(表示初始時的縮放比例),minimum-scale(最小縮放比例)和maximum-scale(最大縮放比例)都為1, 因此整個頁面都不能縮放, retina 屏幕下1個 css 像素對應 2個(多個)物理像素, 因此我們永遠寫不出1px(物理)寬度的東西. 然而我們其實可以這樣寫:
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
淘寶M端 就是這樣的方案，這樣一個css的像素就能完美對應1個物理像素，我們就可以寫出1px的東西了。
其他方案：
1. transform: scale(0.5)
方法1：
CSS代碼：
div{
height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
background: #000;
}
HTML代碼：
<body> 1px邊框線 <div></div> </body>
缺點
圓角無法實現，實現4條邊框比較麻煩，並且只能單獨實現，如果嵌套，會對包含的效果產生不想要的效果，所以此方案配合:after和before獨立使用較多。
比如畫一個商品的邊框四條線，容器的after和before可以畫2條線，利用容器的父元素的after、before再畫2條線。
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;
}
2. box-shadow
實現方法：
利用CSS對陰影處理的方式實現0.5px的效果。
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
優點：
基本所有場景都能滿足，包含圓角的button，單條，多條線。
缺點：
- 顏色不好處理， 黑色 rgba(0,0,0,1) 最深的情況了。有陰影出現，不好用。
- 大量使用box-shadow可能會導致性能瓶頸。
- 四條邊框實現效果不理想。
3. 使用background-image
使用 background-image 實現1px有兩種方式: 漸變 linear-gradient 或直接使用圖片(base64)。
漸變 linear-gradient (50%有顏色，50%透明)
單條線：
div {
height: 1px;
background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%);
background-position: top left;
background-repeat: no-repeat
background-size: 100% 1px;
}
多條線：
div {
background-image:-webkit-linear-gradient(top, transparent 50%, #000 50%),-webkit-linear-gradient(bottom, transparent 50%, #000 50%),-webkit-linear-gradient(left, transparent 50%, #000 50%),-webkit-linear-gradient(right, transparent 50%, #000 50%);
background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
background-repeat: no-repeat;
background-position: top left, bottom left, left top, right top;
}
優點:
- 可以設置單條,多條邊框
- 可以設置顏色
缺點:
- 大量使用漸變可能導致性能瓶頸
- 代碼量大
- 多背景圖片有兼容性問題
用圖片(base64)：
div {
border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}
優點:
- 可以設置單條,多條邊框
- 沒有性能瓶頸的問題
缺點:
- 修改顏色麻煩, 需要替換圖片
- 需要用到兩張圖片
- 多背景圖片有兼容性問題