大屏页面能够在大屏和电脑自适应

5760*2160是大屏比例,原型设计按照这个开发,如果通过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%要不然高度不能满屏
 }

 

你可能感兴趣的:(大屏,html)