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!