移动端web兼容各种分辨率写法

Posted 2020-11-11 yang

移动端web开发最好用rem单位，再设置以下js，以iphone6 750*1334为基准

<script>
        var size = document.documentElement.clientWidth / 750 * 100;
        //PC端訪問時，默認viewport為100
        if (!/android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            size = 100;
        }
        document.documentElement.style.fontSize = size + ‘px‘;

        //解决ios safari 禁用缩放无效问题
        window.onload = function () {
            document.addEventListener(‘gesturestart‘, function (e) {
                e.preventDefault();
            });
            document.addEventListener(‘dblclick‘, function (e) {
                e.preventDefault();
            });
            document.addEventListener(‘touchstart‘, function (event) {
                if (event.touches.length > 1) {
                    event.preventDefault();
                }
            });
            var lastTouchEnd = 0;
            document.addEventListener(‘touchend‘, function (event) {
                var now = (new Date()).getTime();
                if (now - lastTouchEnd <= 300) {
                    event.preventDefault();
                }
                lastTouchEnd = now;
            }, false);
        };
</script>

相当于在根html元素设置了font-size：100px

html {
    font-size: 100px;
}

会根据移动端尺寸大小对应改变根html的font-size，从而实现对各种屏幕大小的兼容

div {
  font-size: .14rem;  // 字体就被对应设置成14px
  width: 2rem;         // 宽度被对应设置成200px      
}