码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-06-06 18:21:59      阅读:504      评论:0      收藏:0      [点我收藏+]

标签:length   event   元素   eve   IV   gettime   err   false   实现   

移动端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      
}

 

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

标签:length   event   元素   eve   IV   gettime   err   false   实现   

原文地址:https://www.cnblogs.com/peter-web/p/9145854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!