说说移动端适配

为啥要做适配

不同设备的逻辑分辨率是不同的，使用UI给的px进行布局，在不同的设备上，元素（你的实际内容）的大小是不固定，所以需要有一层px到实际像素的转换。X：375*812 ， 6.7.8:  375*667。

所以呢UI给出的1px不是100%等于实际的1物理像素，不同的设备会根据对应设备像素比决定使用多少个物理像素显示 1px 的UI样式。

目的是啥

不同屏幕大小的终端设备保持UI风格一致。

那要怎么做

以UI设计稿750*1624为基准。

1.首先呢引入一个概念 devicePixelRatio

设备像素比（Device Pixel Ratio，DPR） 是一个描述设备物理像素与设备独立像素之间关系的数值，它表示设备物理像素与设备独立像素转化的比例关系。

2.怎么算的

dpr = 设备物理像素/设备独立像素 ，window.devicePixelRatio，安卓一般是1，苹果因为有Retina屏幕的存在所以是1-3之间。

3.实现响应式

根据设备的屏幕宽度自动调整页面的字体大小，以确保页面在不同设备上的显示效果一致

(function (document, window) {
    var rootElement = document.documentElement;
    var isIOS = navigator.userAgent.match(/iphone|ipod|ipad/gi);
    var devicePixelRatio = isIOS ? Math.min(window.devicePixelRatio, 3) : 1;
    //事件作为页面大小调整的触发事件
    var resizeEvent = "orientationchange" in window ? "orientationchange" : "resize";
    
    rootElement.dataset.dpr = devicePixelRatio;

    var viewportMeta, hasViewportMeta = false;
    var metaTags = document.getElementsByTagName("meta");
    for (var i = 0; i < metaTags.length; i++) {
        var metaTag = metaTags[i];
        if (metaTag.name === "viewport") {
            hasViewportMeta = true;
            viewportMeta = metaTag;
            break;
        }
    }
    //width=device-width ：将视口的宽度设置为设备的宽度，以确保页面在不同设备上以正确的比例显示。 
    //initial-scale=1.0 ：设置初始缩放比例为 1.0，即不进行缩放。 
    //maximum-scale=1.0 ：设置最大缩放比例为 1.0，禁止用户进行放大操作。 
    //minimum-scale=1.0 ：设置最小缩放比例为 1.0，禁止用户进行缩小操作。 
    //user-scalable=no ：禁止用户进行缩放操作。 
    if (hasViewportMeta) {
        viewportMeta.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no";
    } else {
        var newViewportMeta = document.createElement("meta");
        newViewportMeta.name = "viewport";
        newViewportMeta.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no";
        rootElement.firstElementChild.appendChild(newViewportMeta);
    }

    var setFontSize = function () {
        //获取根元素的客户端宽度
        var clientWidth = rootElement.clientWidth;
        //获取设计宽度（即期望的页面宽度）并存储在变量  designWidth  中。如果没有指定设计宽度，则默认为 750。 
        var designWidth = window['designWidth'] || 750;
        //判断当前设备的屏幕宽度是否超过了设计宽度。如果超过了，则将  clientWidth  重新计算为  designWidth * devicePixelRatio ，以适应高像素密度的设备（如 Retina 屏幕）。
        if (clientWidth / devicePixelRatio > designWidth) {
            clientWidth = designWidth * devicePixelRatio;
        }
        //计算并存储缩放比例  remScale ，即当前设备的实际宽度与设计宽度的比值
        window.remScale = clientWidth / designWidth;
        rootElement.style.fontSize = 100 * (clientWidth / designWidth) + "px";
    };

    setFontSize();

    if (document.addEventListener) {
        window.addEventListener(resizeEvent, setFontSize, false);
    }
})(document, window);

最后呢结合px=>rem的转换

  require("postcss-px2rem-exclude")({
        // 注意算法，这是750设计稿，html的font-size按照750比例，ui给的设计稿为准
        remUnit: 100,
        exclude: /node_modules/i,
      })

使用postcss-px2rem-exclude这个plugin将 CSS 中的像素值转换为 rem 单位，与上面的响应式呢实现遥相呼应。

微信重置字体大小

(function () {
            if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
                handleFontSize();
            } else {
                document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
            }
            function handleFontSize() {
                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
                WeixinJSBridge.on('menu:setfont', function () {
                    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
                });
            }
        })();
        window.onload = function () {
            document.body.style.cssText = "-webkit-text-size-adjust: 100% !important;"
        }

监听网页显示隐藏

     // 设置隐藏属性和改变可见属性的事件的名称
        let hidden, visibilityChange, pagehidden
        if (typeof document.hidden !== "undefined") {
            hidden = "hidden";
            visibilityChange = "visibilitychange";
        } else if (typeof document["msHidden"] !== "undefined") {
            hidden = "msHidden";
            visibilityChange = "msvisibilitychange";
        } else if (typeof document["webkitHidden"] !== "undefined") {
            hidden = "webkitHidden";
            visibilityChange = "webkitvisibilitychange";
        }

        const handleVisibilityChange = () => {
            if (document.visibilityState == "visible") {
                console.info("网页显示");
                pagehidden = false
            } else if (document.visibilityState == "hidden") {
                console.log("网页隐藏");
                pagehidden = true
            }
        };
        document.addEventListener(visibilityChange, handleVisibilityChange, false);