实现1物理像素

实现1物理像素

我们写的1css像素都会跨越好几个物理像素，并且显示出来是按1像素的。那我们怎么实现1物理像素。(淘宝实现)

通过缩放

(function () {
    var dpr = window.devicePixelRatio || 1;
    const styleNode = document.createElement('style');
    let size = document.documentElement.clientWidth * dpr / 16;
    styleNode.innerHTML = `html {font-size: ${size}px!important}`;
    document.head.appendChild(styleNode);
    let scale = 1 / dpr;
    const meta = document.querySelector('meta[name="viewport"]');
    console.log(meta);
    meta.content = `width=device-width, initial-scale=${scale}`;
})()

采用 rem 适配，并放大 rem 的基值 （dpr倍）

再通过系统缩放，缩放回dpr倍， initial-scale=1/dpr

通过 transform

@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(.33333333333333333);
    }
}

伪元素+transform

@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(.33333333333333333);
    }
}