Option 1: Use scale-box component
Attributes:
- width width default 1920
- height height default 1080
- bgc background color default “transparent”
- delay adaptive scaling anti-shake delay time (ms) default 100
vue2 version: vue2 large screen adaptation scaling component (vue2-scale-box – npm)
npm install vue2-scale-box
How to use:
<template>
<div>
<scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
<router-view />
</scale-box>
</div>
</template>
<script>
import ScaleBox from "vue2-scale-box"
export default {
components: { ScaleBox },
};
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}
</style>
vue3 version: vue3 large screen adaptation scaling component (vue3-scale-box – npm)
npm install vue3-scale-box
How to use:
<template>
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
<router-view />
</ScaleBox>
</template>
<script>
import ScaleBox from "vue3-scale-box";
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}
</style>
Option 2: Set device pixel ratio (device pixel ratio)
Create a new devicePixelRatio.js file under the project’s utils
class devicePixelRatio {
/* Get system type */
getSystem() {
const agent = navigator.userAgent.toLowerCase();
const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
if (isMac) return false;
// Currently it is only processed for win. This situation does not exist for other systems. If necessary, continue to add it here.
if (agent.indexOf("windows") >= 0) return true;
}
/* Listening method compatible writing method */
addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
/* Correct browser scaling */
correct() {
// After the page devicePixelRatio (device pixel ratio) changes, calculate the page body tag zoom and modify its size to offset the changes caused by devicePixelRatio
document.getElementsByTagName("body")[0].style.zoom =
1/window.devicePixelRatio;
}
/* Monitor page zoom */
watch() {
const that = this;
// Note: This method is to solve the global problem of having two window.resize
that.addHandler(window, "resize", function () {
that.correct(); // Re-correct the browser zoom ratio
});
}
/* Initialize page proportion */
init() {
const that = this;
// Determine the device and correct the browser zoom ratio only under win system
if (that.getSystem()) {
that.correct(); // Correct browser scaling
that.watch(); // Monitor page zoom
}
}
}
export default devicePixelRatio;
Just introduce and use it in App.vue
<template>
<div>
<router-view />
</div>
</template>
<script>
import devPixelRatio from "@/utils/devicePixelRatio.js";
export default {
created() {
new devPixelRatio().init(); // Initialize page ratio
},
};
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}
</style>
Option 3: Adjust the zoom ratio by setting the zoom attribute through JS
Create a new monitorZoom.js file under the project’s utils
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 & amp; & amp; screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (
window.outerWidth !== undefined & amp; & amp;
window.innerWidth !== undefined
) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
return ratio;
};
Just introduce and use it in 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); // When the screen is 4k
} else {
document.body.style.zoom = 100 / Number(m);
}
Complete code
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
/* Adjust the zoom ratio start */
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {
document.body.style.zoom = 100 / (Number(m) / 2); // When the screen is 4k
} else {
document.body.style.zoom = 100 / Number(m);
}
/* Adjust the zoom ratio end */
Vue.config.productionTip = false;
newVue({
router,
render: (h) => h(App),
}).$mount("#app");
Get the screen resolution
Get the width of the screen: window.screen.width * window.devicePixelRatio
Get the height of the screen: window.screen.height * window.devicePixelRatio
Mobile terminal adaptation (using postcss-px-to-viewport plug-in)
npm install postcss-px-to-viewport –save-dev
Configure the parameters of the adaptation plug-in (create a .postcssrc.js file in the project root directory [level with the src directory]) and paste the following code
module.exports = {
plugins: {
autoprefixer: {}, // Used to automatically add corresponding prefixes to different browsers, such as -webkit-, -moz-, etc.
"postcss-px-to-viewport": {
unitToConvert: "px", // The unit to be converted, the default is "px"
viewportWidth: 390, // width of UI design draft
unitPrecision: 6, //The converted precision, that is, the number of decimal points
propList: ["*"], // Specify the unit of the css attribute to be converted. * means that the units of all css attributes are converted.
viewportUnit: "vw", //Specify the window unit to be converted to, the default is vw
fontViewportUnit: "vw", //Specify the window unit that the font needs to be converted to, the default is vw
selectorBlackList: ["wrap"], // CSS selectors that need to be ignored will not be converted to viewport units, and the original px and other units will be used.
minPixelValue: 1, //Default value 1, if it is less than or equal to 1px, no conversion will be performed
mediaQuery: false, // Whether to also convert in the css code of the media query, the default is false
replace: true, // Whether to directly replace the attribute value without adding alternate attributes
exclude: [/node_modules/], // Ignore files or specific files in certain folders, and use regular rules to match directory names, such as files under 'node_modules'
landscape: false, // Whether to handle landscape situations
landscapeUnit: "vw", // The window unit used in horizontal screen, the default is vw
landscapeWidth: 2048 //Viewport width used in landscape mode
}
}
};