造成边框变粗的原因
css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。
解决方案：
解决方案
一是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。
if (window.devicePixelRatio && devicePixelRatio >= 2) {
vartestElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
// 脚本应该放在内，如果在里面运行，需要包装 $(document).ready(function() {})
方法参照于-http://www.jianshu.com/p/7e63f5a32636
二给一像素的元素加一个类名.scale-1px，代码如下
.scale-1px {
position: relative;
border: none;
}
.scale-1px:after {
content: " ";
position: absolute;
top: 0;
left: 0;
border: 1px solid;
border-color: #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
