【Html】【UI适配】利用viewport进行移动页面等比适配

我们可以将viewport设置为设计图中的px大小，这样其它元素都按照设计图中的px大小设置，即可保持等比效果 这个方法只对移动设备有效，而且有个缺点，就是元素过大时，会超出屏幕范围

    
        
    

    

    
        

        

    

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

        #v1 {
            width: 768px;
            height: 50px;
            background: red;
        }

        #v2 {
            width: 384px;
            height: 50px;
            background: blue;
        }
    

    
        $(adapterViewport);

        //我们可以将viewport设置为设计图中的px大小，这样其它元素都按照设计图中的px大小设置，即可保持等比效果
        //但是由于有的android设备不支持将viewport设置为固定值，我们只能修改scale来间接改变viewport的值
        //这个方法虽然简单，可以在不同设备上实现等比效果，但是有个缺点，就是页面过大时可能超出屏幕，不会自动缩放至屏幕大小
        //由于viewport元数据标签只对移动设备有效，这个方法不适合PC网页
        function adapterViewport() {
            let scale = screen.width / 768;
            let metaNode = document.querySelector("meta[name='viewport']");
            metaNode.content = new String()
                .concat("initial-scale=")
                .concat(scale)
                .concat(",minimum-scale=")
                .concat(scale)
                .concat(",maximum-scale=")
                .concat(scale)
                .concat(",user-scalable=no");
        }