解决页面等比缩放问题

        近些年可视化数据大屏技术早已成熟，在市场上相关技术也是五花八门；通常情况是自行开发，要不找技术比较成熟大厂定制，或者使用较成熟的低代码平台实现。

        技术门槛比较低，不过在数据大屏项目实施过程中会发现，需要调整屏幕分辨率，页面大小自适应，字体大小等问题；由于网页中最小字段12px，内容过多时通常样式控制非常麻烦；此篇将使用CSS3新特性transform技术，来实现分辨率变化后，还可以正常显示页面。

        对transform技术不了解朋友，可以查看文档地址：CSS transform 属性

        由于近期工作较忙，这里将就简单写个页面来演示其效果，如下图：

         如上图，是在1920*1080分辨率下开发出来的页面，刚好是满屏展示。但是在具体实施中，由于大屏宽高不统一，或宽度过宽等问题，导致页面不能正常显示。如下图，将分辨率改为8000*3200，则内容显示非常小。

        

一、页面开发

1.1  Item页面

<template>
	<div class="list-item-box">
		<div class="item-title">
			<h3>{{title}}</h3>
		</div>
		<div class="item-content">
			<slot></slot>
		</div>
	</div>
</template>

<script>
export default {
  name: 'ItemBox',
	props: {
		title: {
			type: String,
			default: () => "标题"
		}
	}
}	
</script>

<style lang="scss" scoped>
@import "./index.scss";	
</style>

1.2 内容页面

<template>
	<div class="home-container">
		<div class="table-wrap">
			<div class="list-item">
				<ItemBox title="uni-app">
					<p>uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，
                        可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/
                        头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。</p>
					<p>DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app
                        插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为
                        uni-app录制培训课程（详见），开发者可以放心选择。</p>
					<p>uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架
                        （详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的
                        项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。</p>
				</ItemBox>
			</div>
			<div class="list-item">
				<ItemBox title="小程序">
					<p>小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，
                        用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关
                        心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。</p>
				</ItemBox>
			</div>
		</div>
		<div class="table-wrap">
			<div class="list-item">
				<ItemBox title="Java">
					<p>Java 是一个通用术语，用于表示 Java 软件及其组件，包括“Java 运行时环境 
                        (JRE)”、“Java 虚拟机 (JVM)”以及“插件”。</p>
					<p>Java具有大部分编程语言所共有的一些特征，被特意设计用于互联网的分布式环境。
                        Java具有类似于C++语言的形式和感觉，但它要比C++语言更易于使用，而且在编程时
                        彻底采用了一种以对象为导向的方式。</p>
					<p>Java版本指的是 Java 系列和更新编号。示例：在网站上或者 Windows 程序
                        中，版本显示为 Java 8 Update 25。旧版本也可显示为 1.7.0_65，这表示
                         Java 7 Update 65。</p>
				</ItemBox>
			</div>
			<div class="list-item">
				<ItemBox title="C#">
					<p>C# 是一个现代的、通用的、面向对象的编程语言，它是由微软（Microsoft）开发的，
                        由 Ecma 和 ISO 核准认可的。</p>
					<p>C# 是由 Anders Hejlsberg 和他的团队在 .Net 框架开发期间开发的。</p>
					<p>C# 是专为公共语言基础结构（CLI）设计的。CLI 由可执行代码和运行时环境组成，
                        允许在不同的计算机平台和体系结构上使用各种高级语言。</p>
				</ItemBox>
			</div>
		</div>
		<div class="table-wrap">
			<div class="list-item">
				<ItemBox title="PHP">
					<p>PHP（PHP: Hypertext Preprocessor）即“超文本预处理器”，是在服务器端执行
                        的脚本语言，尤其适用于Web开发并可嵌入HTML中。PHP语法学习了C语言，吸纳
                        Java和Perl多个语言的特色发展出自己的特色语法，并根据它们的长项持续改进
                        提升自己，例如java的面向对象编程，该语言当初创建的主要目标是让开发人员
                        快速编写出优质的web网站。 [1-2]PHP同时支持面向对象和面向过程的开发，
                        使用上非常灵活。</p>
				</ItemBox>
			</div>
			<div class="list-item">
				<ItemBox title="NodeJs">
					<p>Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript
                        运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1] 让JavaScript 运行
                        在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端
                        语言平起平坐的脚本语言。</p>
					<p>Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行
                        得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript
                        运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。</p>
				</ItemBox>
			</div>
		</div>
	</div>
</template>

<script>
import ItemBox from '../ItemBox/index.vue'

export default {
  name: 'Home',
  components: {
		ItemBox
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";	
</style>

        这里样式太基础，大家自行发挥吧。页面开发完成后，F12打开控制台，在Responsive中调整模拟长屏显示效果，则会发现页面不会跟随页面自适应，下面我们将讲解如何解决此问题。

二、等比缩放

        首先在home-container节点上添加style样式，并将在data中命名样式属性，代码如下：

<template>
	<div class="home-container" :style="ContainerStyle">
		<div class="table-wrap">
			<!-- ... 略 -->
		</div>
	</div>
</template>

<script>
import ItemBox from '../ItemBox/index.vue'

export default {
  name: 'Home',
  components: {
		ItemBox
  },
	data(){
		return {
			ContainerStyle: {
				position: "fixed",
				left: "50%",
				top: "50%",
				"transform-origin": "0 0",
				transform: "scaleX(2) scaleY(2) translate(-50%, -50%)"
			}
		}
	}
}
</script>

        此时页面样式如下图：

         如上图，页面内容已明显比之前大了一倍，那如何自动计算出放大倍数呢？这里则在页面加载时，计算出倍数，公式为当前页面实际宽高 除以开发页面宽(1920px)和高(1080px)，代码如下：

<script>
import ItemBox from '../ItemBox/index.vue'

export default {
  name: 'Home',
  components: {
		ItemBox
  },
	data(){
		return {
			ContainerStyle: {
				position: "fixed",
				left: "50%",
				top: "50%",
				"transform-origin": "0 0",
				transform: "scaleX(2) scaleY(2) translate(-50%, -50%)"
			}
		}
	},
	mounted() {
		this.initialPage();
	},
	methods: {
		initialPage(){
			const w = window.innerWidth / 1920;
			const h = window.innerHeight / 1080;
			this.ContainerStyle.transform = `scaleX(${w}) scaleY(${h}) translate(-50%, -50%)`;
		}
	}
}
</script>

         此时页面效果如下：

         但是现在页面看上去有点变形，失真效果。这是页面8000*3200和1920*1080不是等比原因；如果希望页面能够正常展示，可以以宽度的比例进行缩放，也可以通过高度比例。

        以下通过高度比例等比缩放，代码如下：

<script>
import ItemBox from '../ItemBox/index.vue'

export default {
  name: 'Home',
  components: {
		ItemBox
  },
	data(){
		return {
			ContainerStyle: {
				position: "fixed",
				left: "50%",
				top: "50%",
				"transform-origin": "0 0",
				transform: "scaleX(2) scaleY(2) translate(-50%, -50%)"
			},
			styleType: 3
		}
	},
	mounted() {
		this.initialPage();
	},
	methods: {
		initialPage(){
			const w = window.innerWidth / 1920;
			const h = window.innerHeight / 1080;
			
			switch(this.styleType){
				// 宽和高同时缩放
				case 1: this.ContainerStyle.transform = `scaleX(${w}) scaleY(${h}) translate(-50%, -50%)`; break;
				// 以宽度比例等比缩放
				case 2: this.ContainerStyle.transform = `scale(${w}) translate(-50%, -50%)`; break;
				// 以高度比例等比缩放
				case 3: this.ContainerStyle.transform = `scale(${h}) translate(-50%, -50%)`; break;
			}
			
		}
	}
}
</script>

 

        以高度比例进行缩放好处是，在宽度中内容可以一屏展示出来，但不足的是如果宽度不够，两边会留下许多空白区域，这可根据实现需求来进行处理。

        这里添加styleType变量，用于灵活调节不同展示效果。

        当然变量里参数也可以根据实际情况进行调整，调整后会有不同效果。例如上面最后是以高度比例进行缩放的，但是如果需要通过宽度比例，有些大屏上下内容则会被遮挡住部分，如下图：

        如何解决以上问题呢？这里将position属性改为absolute，top属性改为0，translate的Y轴方向也要改为0，代码如下：

<script>
import ItemBox from '../ItemBox/index.vue'

export default {
  name: 'Home',
  components: {
		ItemBox
  },
	data(){
		return {
			ContainerStyle: {
				position: "fixed",
				left: "50%",
				top: "50%",
				"transform-origin": "0 0",
				transform: "scaleX(1) scaleY(1) translate(-50%, -50%)"
			},
			styleType: 2
		}
	},
	mounted() {
		this.initialPage();
	},
	methods: {
		initialPage(){
			const w = window.innerWidth / 1920;
			const h = window.innerHeight / 1080;
			
			switch(this.styleType){
				// 宽和高同时缩放
				case 1: this.ContainerStyle.transform = `scaleX(${w}) scaleY(${h}) translate(-50%, -50%)`; break;
				// 以宽度比例等比缩放
				case 2: 
					this.ContainerStyle.position = "absolute";
					this.ContainerStyle.top = 0;
					this.ContainerStyle.transform = `scale(${w}) translate(-50%, 0)`; 
				break;
				// 以高度比例等比缩放
				case 3: this.ContainerStyle.transform = `scale(${h}) translate(-50%, -50%)`; break;
			}
			
		}
	}
}
</script>

        此时页面以宽度比例进行缩放效果，由于高度不够，所以需要看到下面内容，需要进行鼠标滚动。如下图：