浏览器等比例缩放一直保持在1920*1080的状态，浏览器不出现滚动条，但可以继续滚动...

最新推荐文章于 2024-11-28 10:34:25 发布

转载最新推荐文章于 2024-11-28 10:34:25 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/camile/p/7209491.html

文章标签：

#前端 #ViewUI

本文介绍了一种利用CSS和JavaScript实现的网页等比缩放布局方案，通过动态调整页面元素的比例来确保在不同分辨率下都能保持良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html{
overflow-x: hidden;
overflow-y: visible;
}
body{
width: 1920px;
height: 1080px;
background: url(../images/bg.png) 0% 0% / 100%;
transform-origin: left top 0px;
overflow-y: visible;
-ms-transform-origin: left top 0px; /* IE 9 */
-moz-transform-origin: left top 0px; /* Firefox */
-webkit-transform-origin: left top 0px; /* Safari 和 Chrome */
-o-transform-origin: left top 0px;
}
body::-webkit-scrollbar {
display: none;
}

js部分：

//等比例缩放屏幕
window.onload=function(){
changeDivHeight();
}
//当浏览器窗口大小改变时，设置显示内容的高度
window.onresize=function(){
changeDivHeight();
}
function changeDivHeight(){
// debugger;
var h = document.documentElement.clientWidth;//获取页面可见高度
var Bbodyhgt=h/1920;
// $(document.body).css("-webkit-transform","scale(" + Bbodyhgt + ")");
$(document.body).css({
"-webkit-transform": "scale(" + Bbodyhgt + ")",
"-ms-transform": "scale(" + Bbodyhgt + ")",
"-moz-transform": "scale(" + Bbodyhgt + ")",
"-o-transform": "scale(" + Bbodyhgt + ")",
});
}