让PC网站在刚进入网页的时候,在手机上自动按比例缩小适应屏幕。
直接代码:
nuxt3:
nuxt.config.js
head: {
meta: [
{
name: "viewport",
content: "width=device-width, initial-scale=0, user-scalable=yes,shrink-to-fit=no",
},
{
charset: "utf-8",
},
],
},
vue
index.html
<meta name="viewport" content="width=device-width, initial-scale=0, user-scalable=yes,shrink-to-fit=no">
JS实现
onMounted(() => {
if (typeof window !== "undefined") {
const percentageOn1 = (window.screen.width / 1920) * 100;
document.body.style.zoom = percentageOn1 + "%";
}
});