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

最新推荐文章于 2024-09-20 21:19:15 发布

lfl18326162160

最新推荐文章于 2024-09-20 21:19:15 发布

阅读量909

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lfl18326162160/article/details/132711682

版权

本文介绍了如何在HTML文件中使用JavaScript函数`resize()`，根据不同浏览器（尤其是Firefox）调整`transform`属性以实现页面自适应缩放，确保在不同分辨率下保持良好的显示效果。

摘要由CSDN通过智能技术生成

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