采用meta viewport的方式，这个也是淘宝触屏采用的方式
常用的移动html viewport的设置如下
具体意思就不多提，它就是让页面的高宽度即为设备的高宽像素，而为了方便绘制0.5像素的viewport的设置如下
这样html的宽高就是设备的2倍，此时依然使用css board为1像素的话，肉眼看到页面线条就相当于transform:scale(0.5)的效果，即为0.5像素
transform-origin 和 transform: scale(0.5, 0.5);
.border {
position: relative;
}
.border:before {
content: "";/* 注意这里为双引号 */
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #ff0000;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
.border-bt-1px {
position: relative;
&::after {
position: absolute;
transform: scaleY(0.5);
}
}
}
