适配移动端的问题

1.react适配设计稿750px。
2.在app.js文件中添加以下代码。入口文件。实际计算100px的换算为1rem。

constructor(props) {
    super(props);
    this.state = {
      styles: {},
    };
    this.bodyRef = React.createRef(null);
    /**
     * 判断pc和移动端
  */}
  componentDidMount() {
    // 移动端键盘弹起引起页面重载，禁止重载.
    const height = window.innerHeight + "px";
    this.bodyRef.current.style.height = height;
    window.onresize = function () {
      document.querySelector("#root").style.height = height;
    }

    if (
      navigator.userAgent.match(/Android/i) ||
      navigator.userAgent.match(/webOS/i) ||
      navigator.userAgent.match(/iPhone/i) ||
      navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/iPod/i) ||
      navigator.userAgent.match(/BlackBerry/i) ||
      navigator.userAgent.match(/Windows Phone/i)
    ) {
      this.setState({ styles: { ...iphone } });
      // 移动端适配
      !(function (win, lib) {
        var timer,
          doc = win.document,
          docElem = doc.documentElement,
          vpMeta = doc.querySelector('meta[name="viewport"]'),
          flexMeta = doc.querySelector('meta[name="flexible"]'),
          dpr = 0,
          scale = 0,
          flexible = lib.flexible || (lib.flexible = {});

        // 设置了 viewport meta
        if (vpMeta) {
          console.warn("将根据已有的meta标签来设置缩放比例");
          var initial = vpMeta
            .getAttribute("content")
            .match(/initial\-scale=([\d\.]+)/);

          if (initial) {
            scale = parseFloat(initial[1]); // 已设置的 initialScale
            dpr = parseInt(1 / scale); // 设备像素比 devicePixelRatio
          }
        }
        // 设置了 flexible Meta
        else if (flexMeta) {
          var flexMetaContent = flexMeta.getAttribute("content");
          if (flexMetaContent) {
            var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
              maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);

            if (initial) {
              dpr = parseFloat(initial[1]);
              scale = parseFloat((1 / dpr).toFixed(2));
            }

            if (maximum) {
              dpr = parseFloat(maximum[1]);
              scale = parseFloat((1 / dpr).toFixed(2));
            }
          }
        }

        // viewport 或 flexible
        // meta 均未设置
        if (!dpr && !scale) {
          // QST
          // 这里的 第一句有什么用 ?
          // 和 Android 有毛关系 ?
          var u =
            (win.navigator.appVersion.match(/android/gi),
              win.navigator.appVersion.match(/iphone/gi)),
            _dpr = win.devicePixelRatio;

          // 所以这里似乎是将所有 Android 设备都设置为 1 了
          dpr = u
            ? _dpr >= 3 && (!dpr || dpr >= 3)
              ? 3
              : _dpr >= 2 && (!dpr || dpr >= 2)
                ? 2
                : 1
            : 1;

          scale = 1 / dpr;
        }

        docElem.setAttribute("data-dpr", dpr);

        // 插入 viewport meta
        if (!vpMeta) {
          vpMeta = doc.createElement("meta");

          vpMeta.setAttribute("name", "viewport");
          vpMeta.setAttribute(
            "content",
            "initial-scale=" +
            scale +
            ", maximum-scale=" +
            scale +
            ", minimum-scale=" +
            scale +
            ", user-scalable=no"
          );

          if (docElem.firstElementChild) {
            docElem.firstElementChild.appendChild(vpMeta);
          } else {
            var div = doc.createElement("div");
            div.appendChild(vpMeta);
            doc.write(div.innerHTML);
          }
        }

        function setFontSize() {
          var winWidth = docElem.getBoundingClientRect().width;
          //如果屏幕最大宽度大于750px，只取750px的宽度
          if (winWidth / dpr > 750) {
            winWidth = 750 * dpr;
          }

          // 根节点 fontSize 根据宽度决定
          var baseSize = winWidth / 7.5;

          docElem.style.fontSize = baseSize + "px";
          flexible.rem = win.rem = baseSize;
        }

        // 调整窗口时重置
        win.addEventListener(
          "resize",
          function () {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
          },
          false
        );

        // 这一段是我自己加的
        // orientationchange 时也需要重算下吧
        win.addEventListener(
          "orientationchange",
          function () {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
          },
          false
        );

        // pageshow
        // keyword: 倒退 缓存相关
        win.addEventListener(
          "pageshow",
          function (e) {
            if (e.persisted) {
              clearTimeout(timer);
              timer = setTimeout(setFontSize, 300);
            }
          },
          false
        );

        // 设置基准字体
        if ("complete" === doc.readyState) {
          doc.body.style.fontSize = 12 * dpr + "px";
        } else {
          doc.addEventListener(
            "DOMContentLoaded",
            function () {
              doc.body.style.fontSize = 12 * dpr + "px";
            },
            false
          );
        }

        setFontSize();

        flexible.dpr = win.dpr = dpr;

        flexible.refreshRem = setFontSize;

        flexible.rem2px = function (d) {
          var c = parseFloat(d) * this.rem;
          if ("string" == typeof d && d.match(/rem$/)) {
            c += "px";
          }
          return c;
        };

        flexible.px2rem = function (d) {
          var c = parseFloat(d) / this.rem;

          if ("string" == typeof d && d.match(/px$/)) {
            c += "rem";
          }
          return c;
        };
      })(window, window.lib || (window.lib = {}));

    } else {
      this.setState({ styles: { ...pc } });
    }


  }
  // 在组件从 DOM 中移除之前立刻被调用
  componentWillUnmount() {
    window.removeEventListener("resize", this.resizeListener);
  }

4.代码已经写了，在移动端键盘弹起会引起页面重新加载，禁止键盘弹起页面重新计算。
5.element里dialog布局（fixed固定的），如果他的父辈们包含了transform位移，dialog会以父辈盒子为限定区域，移除父辈transform。
6.window.open(‘http://baidu.com’,’_self’),【这个链接用户点击后，并且点击还要等待一个接口返回，再打开新页面】在安卓能打开链接，苹果不能打开，因为苹果限制了类似广告的行为。改为在当前页面打开。
7.pc端适配可以用sass书写函数 【使用时宽度：px2vw(100); 高度： px2vh(100) 】

//                              config.scss文件
//设计稿宽度1920px
$psd-width: 1920;

//设计稿高度1080px
$psd-Height: 1080;

// px转rem 根据设计稿宽度
@function px2rem($px) {
  @return ($px / $psd-width) * 10rem;
}

// px转vw 根据设计稿宽度
@function px2vw($px) {
  @return ($px / $psd-width) * 100vw;
}

// px转vh 根据设计稿高度
@function px2vh($px) {
  @return ($px / $psd-Height) * 100vh;
}

//                           在vue.config.js文件
config.css = {
  extract: false,
  loaderOptions: {
    sass: {
      prependData: `@import "/src/assets/css/config.scss";`
    }
  }
}

，vwvh或者用less来使用(宽度/19.2vw 高度/10.2vh)

标签：function,scale,dpr,适配,px,端的,flexible,移动,match
来源： https://blog.csdn.net/qq_42404842/article/details/121765779