一段代码解决前端大屏项目适配的问题

雾里桃花

于 2024-05-20 17:24:47 发布

阅读量248

点赞数 8

分类专栏：大屏适配 js 前端工具文章标签：前端

本文链接：https://blog.csdn.net/csdn_chengpeng/article/details/139067577

版权

js 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端工具

6 篇文章 0 订阅

订阅专栏

大屏适配

1 篇文章 0 订阅

订阅专栏

适配方案

该方案是基于css中的缩放（transform: scale(xxx)）的方法来适配不同分辨率下的页面

实现思路

获取当前页面可视化区域的宽高，对比设计稿的宽高，获得一个缩放比例（宽度比 = 当前可视化区域的宽度 / 设计稿的宽度，高度比 = 当前可视化区域的高度 / 设计稿的高度）

如果宽度比小于高度比，则x轴铺满，y轴出现白边（白边可用背景色去进行填充）
在这里插入图片描述
如果高度比小于宽度比，则y轴铺满，x轴出现白边

如果宽高比相同，则宽高同时铺满视口

核心代码

		initPpage()

		window.onresize = () => {
			initPpage()
		}
		function initPpage() {
			let $body = document.body;
			let scale = 1; //缩放比例
			let d_width = 1920; //设计图宽度
			let d_height = 1080;//设计图高度
			let c_width = window.innerWidth; //当前视图宽度
			let c_height = window.innerHeight;//当前视图高度
			if (c_width / d_width < c_height / d_height) {
				scale = c_width / d_width
			} else {
				scale = c_height / d_height
			}
			$body.style.width = d_width + 'px';
			$body.style.height = d_height + 'px';
			$body.style.transform = `scale(${scale}) translate(-50%,-50%)`
		}

demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			body {
				position: absolute;
				top: 50%;
				left: 50%;
				transform-origin: left top;
				overflow: hidden;
				transition: all 0.3s;
			}

			.top-page {
				background-color: yellowgreen;
				width: 100%;
				height: 540px;
				font-size: 40px;
			}

			.bottom-page {
				background-color: cornsilk;
				width: 100%;
				height: 540px;
				display: flex;
				align-items: flex-end;
				font-size: 40px;
			}
		
		</style>
	</head>
	<body id='body'>
		<div class='top-page'>top</div>
		<div class='bottom-page'>bottom</div>

	</body>

	<script>
		initPpage()

		window.onresize = () => {
			initPpage()
		}
		function initPpage() {
			let $body = document.body;
			let scale = 1; //缩放比例
			let d_width = 1920; //设计图宽度
			let d_height = 1080;//设计图高度
			let c_width = window.innerWidth; //当前视图宽度
			let c_height = window.innerHeight;//当前视图高度
			if (c_width / d_width < c_height / d_height) {
				scale = c_width / d_width
			} else {
				scale = c_height / d_height
			}
			$body.style.width = d_width + 'px';
			$body.style.height = d_height + 'px';
			$body.style.transform = `scale(${scale}) translate(-50%,-50%)`
		}
		
	</script>
</html>

可能遇到的问题

1.页面出现白边

页面出现白边的情况是正常的，因为要保持页面元素的宽高比，防止页面元素出现失真、变形的问题
举个例子
在a分辨率的屏幕上（1920 * 1080），页面上绘制了一个a元素
在1920 * 1080的分辨率下，a元素显示的是一个正方形
在这里插入图片描述
当把页面放到b分辨率的屏幕（1920 * 540）上的时候，页面宽度不变，高度降低了一半，就会出现失真的状况，a元素从正方形变成了长方形

在这里插入图片描述
为了防止元素出现失真的状况，需要将宽度连同高度一起缩放

2.一些第三放ui框架（elementUI等）下拉框的弹层可能会出现跑偏的问题

问题出现的原因：使用了transform之后，视觉上元素的大小发生了改变，但是在现实中，页面元素的宽高还是没缩放之前的样子，只是视觉上发生了变化（可以去官网看一下css中transform的底层原理）
该方案无法对第三方ui库进行适配，建议不要使用第三方ui库，如果已经使用了，则需要手动去调整elementUI的源码或式样，

以下拉框举例，默认情况下，下拉款的弹层是插入到body里的，只要将下拉框的popper-append-to-body属性设置为false，让其插入到下拉框节点内部就可以避免定位跑偏的问题了