web移动端适配

最新推荐文章于 2025-04-24 17:33:03 发布

好迪aa

最新推荐文章于 2025-04-24 17:33:03 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_48859572/article/details/112532275

博客介绍了两种方法，一是将HTML页面meta标签宽度固定，二是根据类型切换赔率。将相关代码放入初始位置即可，因根据倍率适应，无需使用rem，直接用px。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了很多适应方法目前用最多的还是这种

1、将html页面mete标签宽度固定

<meta name="viewport" content="width=375">

meta标签图片

2、根据类型切换赔率

将下方代码放入初始位置就ok了


window.mobile_util = (function(win, doc) {
    var UA = navigator.userAgent,
        isAndroid = /android|adr/gi.test(UA),
        isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, 
        isMobile = isAndroid || isIos; // 判断

    return {
        isAndroid: isAndroid,
        isIos: isIos,
        isMobile: isMobile,
        isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
        isWeixin: /MicroMessenger/gi.test(UA),
        isQQ: /QQ\/\d/gi.test(UA),
        isYixin: /YiXin/gi.test(UA),
        isWeibo: /Weibo/gi.test(UA),
        isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),
        tapEvent: isMobile ? 'tap' : 'click',

        /**
         * 缩放页面
         */
        fixScreen: function() {
            var metaEl = document.querySelector('meta[name="viewport"]'),
                metaCtt = metaEl ? metaEl.content : '',
                matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
                matchWidth = metaCtt.match(/width=([^,\s]+)/);

           if (isMobile && !matchScale && (matchWidth && matchWidth[1] != 'device-width')) { // 定宽
                var width = parseInt(matchWidth[1]),
                    iw = win.innerWidth || width,
                    ow = win.outerWidth || iw,
                    sw = win.screen.width || iw,
                    saw = win.screen.availWidth || iw,
                    ih = win.innerHeight || width,
                    oh = win.outerHeight || ih,
                    ish = win.screen.height || ih,
                    sah = win.screen.availHeight || ih,
                    w = Math.min(iw, ow, sw, saw, ih, oh, ish, sah),
                    scale = w / width;

                if (scale < 1) {
                    metaEl.content = metaCtt + ',' + fillScale(scale);
                }
            }

            function fillScale(scale) {
                return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
            }
        },

       
        getSearch: function(href) {
            href = href || win.location.search;
            var data = {},
                reg = new RegExp("([^?=&]+)(=([^&]*))?", "g");
            href && href.replace(reg, function($0, $1, $2, $3) {
                data[$1] = $3;
            });
            return data;
        }
    };
})(window, document);

// 默认直接适配页面
mobile_util.fixScreen();