高分辨率屏幕自适应适配_js分辨率适配-CSDN博客

本文链接：https://blog.csdn.net/dick_1999/article/details/140518416

//flexible.js

(function (win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});

  if (metaEl) {
    console.warn("将根据已有的meta标签来设置缩放比例");
    var match = metaEl.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
    if (match) {
      console.log("match", match);
      console.log("scale", scale);
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute("content");
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
    }
  }

  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone || isAndroid) {
      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下，仍旧使用1倍的方案
      dpr = devicePixelRatio;
    }
    scale = 1 / dpr;
    // scale = 1 * dpr;
  }

  docEl.setAttribute("data-dpr", dpr);
  if (!metaEl) {
    metaEl = doc.createElement("meta");
    metaEl.setAttribute("name", "viewport");
    metaEl.setAttribute(
      "content",
      "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"
    );
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    var height = docEl.getBoundingClientRect().height;

    let num = width / dpr;
    console.log("num", num);
    if (num > 1600 && num < 1900) {
      width = 1800 * dpr;
    }
    if (num > 1300 && num < 1599) {
      width = 1600 * dpr;
    }
    if (num > 1100 && num < 1299) {
      width = 1400 * dpr;
    }
    if (num > 1000 && num < 1099) {
      width = 1200 * dpr;
    }
    console.log("width", width);
    var rem = (width * dpr) / 10;
    docEl.style.fontSize = rem + "px";
    flexible.rem = win.rem = rem;
    // if(width>3040&&width<3640){
    //   docEl.style.fontSize = 1 + "px";
    //   flexible.rem = 1 + "px";
    // }
  }
  win.addEventListener(
    "resize",
    function () {
      refreshRem();
    },
    false
  );
  win.addEventListener(
    "pageshow",
    function (e) {
      if (e.persisted) {
        refreshRem();
      }
    },
    false
  );
  if (doc.readyState === "complete") {
    doc.body.style.fontSize = 12 * dpr + "px";
  } else {
    doc.addEventListener(
      "DOMContentLoaded",
      function () {
        doc.body.style.fontSize = 12 * dpr + "px";
      },
      false
    );
  }

  refreshRem();

  flexible.dpr = win.dpr = dpr;
  flexible.refreshRem = refreshRem;
  flexible.rem2px = function (d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === "string" && d.match(/rem$/)) {
      val += "px";
    }
    return val;
  };
  flexible.px2rem = function (d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === "string" && d.match(/px$/)) {
      val += "rem";
    }
    return val;
  };
})(window, window["lib"] || (window["lib"] = {}));

//index.js


// 自适应
export function setRem() {
  // 在标准 375px 适配下，100px = 1rem;
  var baseFontSize = 200; //转换的尺寸
  //设计师的尺寸
  var baseWidth = 1920;
  var baseHeight = 1080;
  //浏览器缩放比例
  var t = window.devicePixelRatio || 1;
  //获取当前视口宽高 （*t实际作用为解决笔记本缩放问题，获取的实际为当前设备的实际像素）

  const clientWidth = (document.documentElement.clientWidth || window.innerWidth) * t;
  const clientHeight = (document.documentElement.clientHeight || window.innerHeight) * t;
  if (!clientWidth || !clientHeight) return;

  //比较宽高 以更小的比例为准去适配
  var rem = 100;

  if (clientWidth <= baseWidth) {
    rem = (clientWidth / 1920) * baseFontSize;
  } else {
    rem = (clientHeight / 1080) * baseFontSize;
  }
  document.querySelector("html").style.fontSize = rem + "px";
  console.log("nextTick");
  //解决缩放问题
  nextTick(() => {
    let c = document.querySelector("body");
    c.style.zoom = 1 / t;
  });
}

export function calculateCssZoom() {
  console.log('calculateCssZoom')
  const viewportHeight = document.documentElement.clientHeight || document.body.clientHeight; // 实际浏览器视口的高度
  const viewportWidth = document.documentElement.clientWidth || document.body.clientWidth; // 实际浏览器视口的宽度
  const designHeight = 1080; // 设计稿的高度
  const designWidth = 1920; // 设计稿的宽度
  const zoomValueHeight = viewportHeight / designHeight; // 高度计算出来的zoom值
  const zoomValueWidth = viewportWidth / designWidth; // 宽度计算出来的zoom值
  const targetZoom = zoomValueWidth > zoomValueHeight ? zoomValueHeight : zoomValueWidth; // 比较大小选择最终实际需要的zoom值
  nextTick(() => {
    let c = document.querySelector("body");
    c.style.zoom = targetZoom;
  });
}

//vite.config.js
//postcssPxtoRem 组件的使用

import { defineConfig } from "vite";
import path from "path";
import createVitePlugins from "./vite/plugins";
import postcssPxtoRem from "postcss-pxtorem";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: createVitePlugins(),
  server: {
    port: 9966,
    host: true,
    open: true,
    proxy: {
      // https://cn.vitejs.dev/config/#server-proxy
      "/dev-api": {
        // target: "http://192.168.10.156:9280",
        // target: "http://192.168.10.183:58090",
        // target: "http://192.168.60.87:58089",
        // target: "http://192.168.60.105:58089",
        // target: "http://10.3.208.9:3001/prod-api",
        target: "http://ai.agent.objecteye.com:59101/prod-api",
        // target: "http://ai.agent.objecteye.com:59101/prod-api",
        // target: "http://base.ztj.ai-agents.objecteye.com:59101/prod-api",
        changeOrigin: true,
        rewrite: p => p.replace(/^\/dev-api/, ""),
      },
      "/ahb-api": {
        target: "http://192.168.60.138:58089",
        changeOrigin: true,
        rewrite: p => p.replace(/^\/ahb-api/, ""),
      },
      "/zl-api": {
        target: "http://192.168.61.78:58089",
        changeOrigin: true,
        rewrite: p => p.replace(/^\/zl-api/, ""),
      },
      "/skf-api": {
        target: "http://192.168.60.105:58089",
        changeOrigin: true,
        rewrite: p => p.replace(/^\/skf-api/, ""),
      },
      "/club-api": {
        target: "http://dqmileqxqeihdpwk.fastnat.club",
        // target: "http://10.3.208.1:58089",
        changeOrigin: true,
        rewrite: p => p.replace(/^\/club-api/, ""),
      },
      "/ll-api": {
        target: "http://10.3.208.9:20001/",
        // target: "http://10.3.208.1:58089",
        changeOrigin: true,
        rewrite: p => p.replace(/^\/ll-api/, ""),
      },
      "/cx-api": {
        target: "http://10.3.208.9:3001/",
        changeOrigin: true,
        rewrite: p => p.replace(/^\/cx-api/, ""),
      },
      "/test-api": {
        // target: "http://192.168.60.113:58089",
        // target: "http://192.168.60.244:58089",
        // target: "http://192.168.40.229:9366",
        // target: "http://10.3.208.1:58089",
        target: "http://111.11.100.222:59123",
        changeOrigin: true,
        rewrite: p => p.replace(/^\/test-api/, "/"),
      },
    },
  },
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./"),
      "@": path.resolve(__dirname, "./src"),
    },
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
  },
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
  css: {
    postcss: {
      plugins: [
        postcssPxtoRem({
          rootValue: 192, // 按照自己的设计稿修改 1920/10
          unitPrecision: 5, // 保留到5位小数
          selectorBlackList: ["ignore"], // 忽略转换正则匹配项
          propList: ["*"],
          replace: true,
          mediaQuery: true, // 媒体查询( @media screen 之类的)中不生效
          minPixelValue: 1, //可以选择px小于1的不会被转换
        }),
      ],
    },
  },
});