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

相关推荐
前端啊龙4 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠8 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds28 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果1 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript