5760*2160是大屏比例,原型设计按照这个开发(<body style="width:5760px;height:2160px">),如果通过zoom方式修改,只能针对大屏适应,下面的代码能够让大屏页面即在大屏适应展示,也能够在电脑适应展示
//监听浏览器变化
window.onresize = function() {
setAppScale();
};
function setAppScale() {
var ratioY = $(window).height()/2160;
var ratioX = $(window).width()/5760;
$("body").css({
transform: "scale("+ratioX+","+ratioY+")",
transformOrigin: "left top",
overflow:"hidden"
});
}
$().ready(function(){
//初始化时调整大小
setAppScale();
});
如果是zoom的方式,只能针对大屏调整,电脑高度有问题,也提供代码
//监听浏览器变化
window.onresize = function() {
self.setAppScale();
};
setAppScale() {
let app = document.body;
let width = document.body.clientWidth;
app.style.zoom = width / 5760;
app.style.minHeight = '100%'; //注意这里必须设置最小高度为100%要不然高度不能满屏
}