h5项目与原生安卓、ios、小程序交互、pc端

279 阅读1分钟
h5项目做的以根节点字体大小的移动端自适应。 但pc端调用h5项目某个页面时,导致字体太大。所以解决方法如下: (在index.html设置)
    let os = function (){
      let ua = navigator.userAgent,
          isWindowsPhone = /(?:Windows Phone)/.test(ua),
          isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
          isAndroid = /(?:Android)/.test(ua),
          isFireFox = /(?:Firefox)/.test(ua),
          isChrome = /(?:Chrome|CriOS)/.test(ua),
          isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
          isPhone = /(?:iPhone)/.test(ua) && !isTablet,
          isPc = !isPhone && !isAndroid && !isSymbian;
      return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
      };
    }();

    if (os.isAndroid || os.isPhone) {
      console.log("手机")
    } else if (os.isTablet) {
      console.log('平板')
    } else if(os.isPc) {
       console.log('电脑')
      (function () {
        reset();
        window.addEventListener("orientationchange", function () {
          reset();
        });
        window.addEventListener("resize", function () {
          reset();
        });
        function reset () {
          document.querySelector("html").style.fontSize = 46 + "px";
        }
      })();
    }