【Html】【UI适配】移动端通过像素比适配1物理像素

预期结果 可以通过页面缩放，来缩小px对应的实际大小

    
        
    

    

    
        

        

    

    
        html, body {
            padding: 0px;
            margin: 0px;
        }

        #v1 {
            width: 100%;
            height: 50%;
        }

        #v2 {
            width: 100%;
            height: 1px;
            background: red;
        }
    

    
        $(() => {
            let metaNode = document.querySelector("meta[name='viewport']");
            //假设像素比为3，即理想视口下，1px代表3个物理像素，这时我们将页面缩小3倍，1px的大小就正好是1物理像素
            metaNode.content = "width=device-width, initial-scale=" + 1 / window.devicePixelRatio;
        });
    

也可以通过媒体查询来对css样式进行缩放

    
        
    

    

    
        

        

    

    
        html, body {
            padding: 0px;
            margin: 0px;
        }

        #v1 {
            width: 100%;
            height: 50%;
        }

        #v2 {
            width: 100%;
            height: 1px;
            background: red;
        }

        @media only screen and (-webkit-device-pixel-ratio: 2) {
            #v2 {
                transform: scaleY(0.5);
            }
        }

        @media only screen and (-webkit-device-pixel-ratio: 3) {
            #v2 {
                transform: scaleY(0.33);
            }
        }
    

但要注意，这两种情况下，页面总的css-pixel数量是不一样的，其它元素的大小设置方式也应当不一样