Browser adaptation problem solutions

1. Determine the browser’s kernel

var browser = {
            versions: function () {
                var u = navigator.userAgent;
                return {
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
                    iPhone: u.indexOf('iPhone') > -1, //iPhone
                    iPad: u.indexOf('iPad') > -1, //iPad
                    webApp: u.indexOf('Safari') > -1 //Safari
                };
            }()
        }
        if (browser.versions.trident) {
            $('.container').hide()
        }

2. Page resolution adaptation

2.1 During native development

//等比例缩放
function bodyScale() {
      var devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
      var scale = devicewidth / 1920; // 分母——设计稿的尺寸
      document.body.style.zoom = scale;//放大缩小相应倍数
    }
    bodyScale();

2.2 When developing the vue project

使用postcss-px2rem方法
安装(npm i postcss-px2rem --save -dev) --> (1)找到根目录下的.postcssrc文件{
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      "browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8']
     },
     'postcss-px2rem':{'remUnit':75}    //配置rem基准值，75是iphone6标准
  }
 }
}
转换好后再根元素设置它的font-size  html{font-size:10vw}
(2) 找到根目录下的vue-loader.conf.js
设置html的fontsize值，1rem=html的font-size，可以直接在index.html中设置
PC端
(function () {
    function setRootFontSize() {
        let rem, rootWidth;
        let rootHtml = document.documentElement;
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        // 19.2 = 设计图尺寸宽 / 100（ 设计图的rem = 100 ）
        rem = rootWidth / 19.2;
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
})();
移动端
(function () {
    function setRootFontSize() {
        let dpr, rem, scale, rootWidth;
        let rootHtml = document.documentElement;
    
        dpr = window.devicePixelRatio || 1; //移动端必须设置
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100（设计图的rem = 100）
        scale = 1 / dpr;
    
        // 设置viewport，进行缩放，达到高清效果 (移动端添加)
        let vp = document.querySelector('meta[name="viewport"]');
        vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
    window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();