如何解决移动端 Retina 屏 1px 像素问题？1、伪元素+transformscaleY(.5)2、viewpor

1、伪元素 + transform scaleY(.5)

2、viewport + rem

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: .5rem;
        height: .5rem;
        background-color: chocolate;
        border-bottom: 1px solid #000;
    }
</style>

<body>
    <div class="box">

    </div>
</body>

</html>

<script>
    window.onload = function () {
        //像素比
        let dpr = window.devicePixelRatio
        console.log(dpr)
        //缩放比例
        var scale = 1 / dpr
        //获取meta标签
        var metaNode = document.querySelector('meta[name="viewport"]')
        var width = document.documentElement.clientWidth
        //将缩放比例设置一下
        metaNode.setAttribute('content', 'width = device - width, initial - scale=' + scale)
        //获取html元素
        var htmlNode = document.querySelector('html')
        htmlNode.style.fontSize = width * dpr+'px'

    }

</script>