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

最新推荐文章于 2024-06-22 14:11:27 发布

牟云飞

最新推荐文章于 2024-06-22 14:11:27 发布

阅读量5.2k

点赞数 1

分类专栏：大屏 html

本文为博主牟云飞原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/98880622

版权

大屏同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

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%要不然高度不能满屏
 }

牟云飞

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
4
评论
大屏页面能够在大屏和电脑自适应

5760*2160是大屏比例，原型设计按照这个开发，如果通过zoom方式修改，只能针对大屏适应，下面的代码能够让大屏页面即在大屏适应展示，也能够在电脑适应展示//监听浏览器变化window.onresize = function() { setAppScale();};function setAppScale() { var ratioY = $(window).height(...
复制链接

扫一扫