zoukankan      html  css  js  c++  java
  • 移动端web兼容各种分辨率写法

    移动端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      
    }
  • 相关阅读:
    hdu 4947
    hdu 4946
    hdu 4944
    hdu 4942
    hdu 4941
    PAT 【L2-011 玩转二叉树】
    PAT【L2-006 树的遍历】
    XYNUOJ 【2070: 重建二叉树】
    XYNUOJ 【1367: 二叉链表存储的二叉树】
    XYNUOJ 2390【二叉树遍历2】
  • 原文地址:https://www.cnblogs.com/peter-web/p/9145854.html
Copyright © 2011-2022 走看看