移动端布局适配

最新推荐文章于 2024-05-16 13:18:18 发布

Best_卡卡

最新推荐文章于 2024-05-16 13:18:18 发布

阅读量152

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43909743/article/details/117789191

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

前言

接收一个之前的项目，这里的适配布局使用的是原生监听，重写登录页面存在，键盘弹起导致页面适配变形

重写移动适配

(function(win) {
        var tid;
        function refreshRem() {
            let designSize = 750; // 设计图尺寸
            let html = document.documentElement;
            let wW = html.clientWidth;// 窗口宽度
            let rem = wW * 100 / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }

        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem);
            }
        }, false);

        refreshRem();

    })(window);

pc端适配

!(function (doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function () {
            var width = docEle.clientWidth;
            var fs = (width / 1920) * 100
            if (width < 960) {
                fs = (960 / 1920) * 100
            }
            width && (docEle.style.fontSize = fs + "px");
            /* document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');*/
        };
    fn()
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);


    document.addEventListener("error", function (e) {

        var elem = e.target;
        if (elem.tagName.toLowerCase() == 'img') {
        // 错误图片的默认显示
            elem.src = "static/images/imgLoadFail.jpg";
        }
    }, true);
}(document, window));