SoFunction
Updated on 2025-04-06

Detailed tutorial on adapting screen resolution and screen zoom adaptation of vue project

Laptop or monitor The default setting is 125% or 150% scaling, resulting in a confusing layout

Nowadays, many 14-inch laptops have a 150% display default. Many times, when our projects are developed by ourselves, they will be developed at a rate of 100%. If they are launched, they will find this problem.

Solution

Create a new file under vue project utils

class DevicePixelRatio {
  constructor() {
    //  = false;
  }
  // Get the system type  _getSystem() {
    // let flag = false;
    var agent = ();
    //		var isMac = /macintosh|mac os x/();
    //		if(isMac) {
    //			return false;
    //		}
    // Now only for Windows processing, there is no such situation in other systems. If so, continue to add it here    if (('windows') >= 0) {
      return true;
    }
  }
  // Get the page scaling  //	_getDevicePixelRatio() {
  //		let t = this;
  //	}
  // Compatible writing method for monitoring method  _addHandler(element, type, handler) {
    if () {
      (type, handler, false);
    } else if () {
      ('on' + type, handler);
    } else {
      element['on' + type] = handler;
    }
  }
  // Correct browser zoom  _correct() {
    let t = this;
    // After the page devicePixelRatio (device pixel ratio) changes, calculate the page body tag zoom to modify its size to offset the changes brought by devicePixelRatio.    ('body')[0]. = 1 / ;
  }
  // Listen to page zoom  _watch() {
    let t = this;
    t._addHandler(window, 'resize', function() { // Note that this method is to solve the problem of two globally      // Recalibrate      t._correct()
    })
  }
  // Initialize the page proportion  init() {
    let t = this;
    if (t._getSystem()) { //Judge the device, currently only correct the browser zoom ratio under Windows system      // Initialize the page to correct the browser zoom      t._correct();
      // Turn on the monitoring page zoom      t._watch();
    }
  }
}
export default DevicePixelRatio;

Global import

<script>
import DevicePixelRatio from './util/devicePixelRatio'
export default {
  name: 'App',
  data() {
    return {
    }
  },
  created() {
    new DevicePixelRatio().init()
  }
}
</script>

Refresh the page

No matter how you scale, 125% or 150%, the page will not be scaled, so there will be no confusion problems.

This is the article about the adaptation of screen resolution and screen zoom of vue project - the tutorial. For more related vue screen resolution content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!