前端简单的移动端适配

岁月如歌_

已于 2022-02-19 11:43:27 修改

阅读量1k

点赞数 1

文章标签：前端 javascript html

于 2019-05-30 10:02:12 首次发布

本文链接：https://blog.csdn.net/namechenfl/article/details/90691938

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,ul,li,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend,input{margin:0; padding:0;}
        ul,li,ol{list-style:none;}
        img,fieldset{border:0; }
        img{display:block;}
        a{text-decoration:none; color:#333;}
        h1,h2,h3,h4,h5,h6,strong{font-weight:500;}
        body{ font-family:"微软雅黑";font-size: 12px;word-break: break-all;}
        input,a{outline:none;}
    </style>
    <script>           
       (function(doc, win) {
            var docEl = doc.documentElement,
                isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                dpr = 1,
                scale = 1 / dpr,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            docEl.dataset.dpr = dpr;
            var metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
            var recalc = function() {
                var width = docEl.clientWidth;
                if (width / dpr > 750) {
                    width = 750 * dpr;
                }
                // 乘以100，px : rem = 100 : 1
                docEl.style.fontSize = 100 * (width / 750) + 'px';
            };
            recalc()
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
        })(document, window);
   </script>
</head>
<body>
    22
</body>
</html>

岁月如歌_

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端简单的移动端适配

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫