Front-end vue solves the problem of page adaptation screen scaling based on 1920*1080 design drawings and adapting to 4K screens

Tip: The front-end vue solves the problem of adapting the page based on the 1920*1080 design drawing to screen scaling and adapting to the 4K screen

---

illustrate

The company did not communicate well before the project. The page made according to the 1920*1080 design drawing had a zoom ratio of 100%. After the project was completed, it was said that the zoom ratio should be adapted and adapted to the 4k screen, and then various Baidu methods were found.

---

1. First, adapt the zoom ratio of the screen

This method was also solved by reading articles posted by others. The original address is here: Front-end solution to the impact of notebook screen display scaling of 125% and 150% on page layout.
I used the second method and glued it directly.

1. Create a detectZoom.js file externally, I am in the utils folder

The detectZoom.js file code is as follows:

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. Reference in main.js

m is the zoom ratio of the current screen obtained, and the corresponding zoom is done through the zoom attribute.
The zoom property is used to set or retrieve the zoom ratio of an object.

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

The above is a method to solve the screen scaling ratio, which can be solved when the screen resolution is 1920*1080.

2. Solve the problem of 4k screen

After the project was completed, I was suddenly told that it needed to be adapted to the 4k screen, and that the 4k screen would also have a screen scaling ratio. I didn't want to change the page style again, so I thought of this method. It is also through the zoom attribute. The principle is to make the system's display area become 1920*1080 by zooming the entire body.

1. Get the resolution of the current screen

Get the width of the screen: window.screen.width * window.devicePixelRatio
Get the height of the screen: window.screen.height * window.devicePixelRatio

2. Adjust the zoom ratio according to different screens and zoom ratios

The code in main.js is as follows:

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);
}

Final result: Although the screen is 4k, the visible area of ​​the system display page is still 1920*1080, and the page style is not messy.