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();

相关推荐
Nan_Shu_6142 分钟前
学习: Threejs (2)
前端·javascript·学习
北辰alk6 分钟前
为什么不建议在 Vue 中同时使用 v-if 和 v-for?深度解析与最佳实践
vue.js
北辰alk8 分钟前
Vue 模板中保留 HTML 注释的完整指南
vue.js
G_G#10 分钟前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
北辰alk21 分钟前
Vue 组件 name 选项:不只是个名字那么简单
vue.js
北辰alk22 分钟前
Vue 计算属性与 data 属性同名:优雅的冲突还是潜在的陷阱?
vue.js
北辰alk23 分钟前
Vue 的 v-show 和 v-if:性能、场景与实战选择
vue.js
@大迁世界26 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路35 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug38 分钟前
后端开发者视角的前端开发面试题清单(50道)
前端