1像素边框解决方案

造成边框变粗的原因

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; 
}