vue和h5如何设置网页端和窗口大小同步缩放

在HTML文件中加入以下代码

<body style="transform-origin: top left; -moz-transform-origin: top left; font-family: Microsoft YaHei; width: 100%; height: 100%; margin: 0px; overflow: hidden; background-color: rgb(0,42,77);" οnresize="resize();">

function resize() {

var curWidth = document.documentElement.clientWidth;

var curHeight = document.documentElement.clientHeight;

var s1 = curWidth / 1920;

var s2 = curHeight / 1080;

var scale = (s1 > s2 ? s2 : s1);

var userAgent = navigator.userAgent.toLowerCase();

if (userAgent.indexOf("firefox") != -1) {

//-moz-transform:scale(0.66);

document.body.style.MozTransform = "scale(" + scale + ")";

}

else {

document.body.style.transform = "scale(" + scale + ")";

}

}

resize();

相关推荐
申阳几秒前
Day 13:个人开发者的 Cloudflare 通关指南-R2对象存储搭建高速免费图床
前端·后端·程序员
nvd115 分钟前
niri 音频图形界面工具
前端·chrome·音视频
凯哥19705 分钟前
彻底解决 Windsurf 在 Vue DevTools 无法精准定位的问题
前端
凡人程序员7 分钟前
微前端qiankun接入的问题
前端·javascript
CharlieWang9 分钟前
AI Elements Vue,帮助你更快的构建 AI 应用程序
前端·人工智能·chatgpt
新晨43712 分钟前
JavaScript map() 方法:从工具到编程哲学的升华
前端·javascript
醒了接着睡12 分钟前
JS 对象深拷贝
javascript
少卿14 分钟前
Webpack 构建流程全解:从源码到产物的“奇幻漂流”
前端·webpack
西瓜树枝14 分钟前
前端必读:HTTP 协议核心知识全景图(三)—— 响应头详解
前端·http
码途进化论21 分钟前
Vue3 + Vite 系统中 SVG 图标和 Element Plus 图标的整合实战
前端·javascript·vue.js