前端vue按1920*1080設計圖的頁面適配屏幕縮放并適配4K屏詳解

更新時間：2022年11月16日 11:43:11 作者：@＃

最近在做一個數據可視化的項目,整個項目全是大屏展示,期間也是遇到很多問題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設計圖的頁面適配屏幕縮放并適配4K屏的相關資料,需要的朋友可以參考下

說明

公司項目做之前沒有溝通好，按照1920*1080設計圖做的頁面，縮放比是100%，項目做完之后說要適配縮放比，并且適配4k屏，然后就各種百度找辦法。

一、首先是適配屏幕的縮放比

這種方法也是通過看別人發(fā)布的文章解決的，原來的地址在這：前端解決筆記本屏幕顯示縮放比例125% 150%對頁面布局的影響

我是用的第二種方法，直接就粘過來了。

1.在外部創(chuàng)建一個detectZoom.js文件，我是在utils文件夾下

detectZoom.js文件代碼如下：

export const detectZoom = () => {
  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中引用

m是獲取的當前屏幕的縮放比，在通過zoom屬性對應縮放。

zoom屬性用于設置或檢索對象的縮放比例。

import { detectZoom } from '@/utils/detectZoom.js';
const m = detectZoom();
document.body.style.zoom = 100 / Number(m);

以上為解決屏幕縮放比的方法，在屏幕分辨率為1920*1080時可以解決。

二、解決4k屏幕的問題

在項目做完之后突然告知需要適配4k屏，并且4k屏的時候也會有屏幕縮放比，不想重新改頁面樣式就想了這個辦法。也是通過zoom屬性，原理就是通過整個body的縮放使系統(tǒng)的展示區(qū)域變成1920*1080

1.獲取當前屏幕的分辨率

獲取屏幕的寬：window.screen.width * window.devicePixelRatio

獲取屏幕的高：window.screen.height * window.devicePixelRatio

2.根據不同屏幕和縮放比來調節(jié)zoom的比例

在main.js中代碼如下：

import { detectZoom } from '@/utils/detectZoom.js';

const m = detectZoom();
 //判斷屏幕是否為4k
if (window.screen.width * window.devicePixelRatio >=3840) {
  // switch (m) {
  //   // 4k屏時屏幕縮放比為100%
  //   case 100:
  //     document.body.style.zoom = 100 / 50;
  //     break;
  //     // 4k屏時屏幕縮放比為125%
  //   case 125:
  //     document.body.style.zoom = 100 / 62.5;
  //     break;
  //     // 4k屏時屏幕縮放比為150%
  //   case 150:
  //     document.body.style.zoom = 100 / 75;
  //     break;
  //     // 4k屏時屏幕縮放比為175%
  //   case 175:
  //     document.body.style.zoom = 100 / 87.4715;
  //     break;
  //     // 4k屏時屏幕縮放比為200%
  //   case 200:
  //     document.body.style.zoom = 100 / 100;
  //     break;
  //     // 4k屏時屏幕縮放比為225%
  //   case 225:
  //     document.body.style.zoom = 100 / 112.485;
  //     break;
  
  //   default:
  //     break;
  // }
  document.body.style.zoom = 100 / (Number(m)/2);
}else{
  document.body.style.zoom = 100 / Number(m);
}

最后結果：雖然屏是4k的，但是系統(tǒng)展示頁面的可視區(qū)域依舊是1920*1080的，頁面樣式也沒有亂。