????????公司項(xiàng)目做之前沒有溝通好，按照1920*1080設(shè)計(jì)圖做的頁面，縮放比是100%，項(xiàng)目做完之后說要適配縮放比，并且工控屏（分辨率1024*768），需要做小屏適應(yīng)。

????????開發(fā)中一般pc端都是不用怎么考慮去適配屏幕的，因?yàn)楝F(xiàn)在的屏幕分辨率都是1960*1080，所以正常的前端頁面都是可以適配的。

????????項(xiàng)目技術(shù)棧：vue2+elementUI

一 . 需求

分辨率：

????????pc：1920*1080

????????工位機(jī)：1024*768

二 . 解決方案

1.使用scale-box 組件

????????主要針對(duì)大屏可視化，適用于個(gè)別大屏適配，不能全局適配，但是側(cè)邊會(huì)留白居中

2.使用JS 設(shè)置 zoom 屬性調(diào)整縮放比例 （調(diào)試可用）

????????可以全局設(shè)置 但是會(huì)出現(xiàn)縮放比例失調(diào) 部分ui布局也會(huì)改變

? ? ? ??使用屬性zoom，會(huì)導(dǎo)致一些問題比如使用了element的一些組件，下拉選項(xiàng)，下拉會(huì)出現(xiàn)偏移的現(xiàn)象

?3.使用postcss-px2rem以及postcss-px-to-viewport

????????通過px轉(zhuǎn)rem以及vw的方案 雖然能全局使用 這些插件對(duì)行內(nèi)樣式不起效果 總的來說，不太適合已經(jīng)成型的項(xiàng)目,還是會(huì)導(dǎo)致樣式丟失

三 . 方案選擇

????????考慮已經(jīng)成型的項(xiàng)目，無法逐一進(jìn)行適配，所以針對(duì)那些px轉(zhuǎn)rem以及vw的方案不能使用，代碼調(diào)整處過多，故只能對(duì)頁面進(jìn)行一個(gè)強(qiáng)行縮放，去保證小屏下的布局樣式不會(huì)亂同時(shí)功能也正常。

????????以上三種都試過了，由于針對(duì)我的項(xiàng)目情況，我選的是第二種進(jìn)行設(shè)置 zoom 屬性調(diào)整縮放比例，最為穩(wěn)妥。其他的我不在逐一述說，接下來主說我選的合適方案。

四 . 方案處理

????????1.在src同級(jí)目錄下utils文件中創(chuàng)建monitorZoom.js 內(nèi)容如下

export const monitorZoom = () => {
    let ratio = 0,
      screen = window.screen,
      ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
    } else if (~ua.indexOf("msie")) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI;
      }
    } else if (
      window.outerWidth !== undefined &&
      window.innerWidth !== undefined
    ) {
      ratio = window.outerWidth / window.innerWidth;
    }
    if (ratio) {
      ratio = Math.round(ratio * 100);
    }
    return ratio;
  };

????????2.在入口文件main.js中

import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {
  document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕為 4k 時(shí)
} else {
  document.body.style.zoom = 100 / Number(m);
}

????????3.通過路由前置守衛(wèi) 控制某一個(gè)路由頁面合適的縮放

import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
router.beforeEach((to, from, next) => {
  console.log("即將跳轉(zhuǎn)到的路由 ------------------------ >  " + to.name);
  /* 調(diào)整縮放比例 start */
  //針對(duì)工控屏調(diào)整的縮放比
  if (to.name === 'home' && window.screen.width <= 1024) {
    document.body.style.zoom = 60 / Number(m);//60是對(duì)著屏幕具體調(diào)的，因屏而異
  }else {
    document.body.style.zoom = 100 / Number(m);
  }
  /* 調(diào)整縮放比例 end */

????????工控端界面的話合適比例為document.body.style.zoom = 60 / Number(m);

????????同時(shí)需要解決刷新縮放丟失問題，刷新的時(shí)候重新計(jì)算縮放比文章來源地址http://www.zghlxwxcb.cn/news/detail-687365.html

到了這里，關(guān)于vue2項(xiàng)目PC端自適應(yīng)屏幕的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！