html5移动端页面1px边框问题

HTML5移动端开放的同学们都遇到过这个问题：

很早之前我自己也遇到过这样的问题，设计对你的1px边框很不满意，这时候你还在纳闷，什么问题。设计会说boy，你是不是移动端开发的，这让我自己很尴尬，因为我那时候我刚刚进行移动端开发不知道这类问题，我就去网上找了下这个问题，通过对网上的资料我知道移动端1px和pc端是不一样的，主要原因是window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent
pixels (dips))的比例问题导致。 网上说了很多的方法，我自己也试过很多，最终给大家推荐一种：

／* .class元素class名字，1px 右边框 *／
如：
.class{
position:relative;
}
.class:after {
position: absolute;
top: 0;
right: 10px;
width: 0;
height: 200%;
border-right: solid 1px #e8ebec;
z-index: 99;
content: “”;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform: scale(0.5);
transform-origin: 0 0;
}

以上是我经常使用的1px移动端边框问题的解决方法，如果你们有更好的可以用自己的，也可以参考上边的例子。