移动端1px实现方式

关于1px的实现我在实习的时候项目中使用过，但是一直没有对移动端1px的实现做一个小总结。

实现方式

rem+系统缩放：

1.主体适配采用rem适配 并放大rem的基值(dpr倍)
2.再通过系统缩放 缩回dpr倍，initial-scale=1/dpr

var dpr  = window.devicePixelRatio||1;
var styleNode = document.createElement("style");
var w = document.documentElement.clientWidth*dpr/16;
styleNode.innerHTML="html{font-size:"+w+"px!important}";
document.head.appendChild(styleNode);

var scale = 1/dpr;
var meta = document.querySelector("meta[name='viewport']");
meta.content="width=device-width,initial-scale="+scale;

响应式+变换缩放：

通过meta视口标签根据不同的dpr对不同的页面进行缩放。这需要通过JS进行动态的设置。简单的说，假如想设置1px的线，在dpr=2情况下，页面就缩放到原来的一半，此时就会正常显示1px的线；在dpr=3的情况下，页面就缩放到原来的三分之一，此时也能够正常显示1px的线。

@media only screen and (-webkit-device-pixel-ratio:2 ) {
        #test{
                transform: scaleY(.5);
        }
}
@media only screen and (-webkit-device-pixel-ratio:3 ) {
        #test{
                transform: scaleY(.333333333333333333);
        }
}