可视化大屏实现屏幕自适应和自动全屏的实现

前言

在可视化大屏项目中，屏幕适配是绕不过去的一个问题（ps：如果知道大屏展示的屏幕是固定的，当我没说）。这里简单介绍通过 css的transform属性里面的 scal() 实现常规屏幕适配。

常规屏幕：

1366 * 768
1920 * 1080 （最常见的大屏分辨率）
2560 * 1440 （2k）
3840 * 2160 （4k）
5120 * 2880 （5k）

其他场景屏幕：

1280 * 800
1440 * 900
…

一、自适应实现

1. 新增自适应组件

<template><div class="screen-adapter"><div class="content-wrap" :style="style"><slot></slot></div></div>
</template><script>
export default {name: 'ScreenAdapter',props: {w: { // 设计图尺寸宽type: Number,default: 1920,},h: { // 设计图尺寸高type: Number,default: 1080,},},data() {return {style: {width: `${this.w}px`,height: `${this.h}px`,transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中},};},mounted() {this.setScale();this.onresize = this.debounce(() => this.setScale(), 100);window.addEventListener('resize', this.onresize);},methods: {// 防抖debounce(fn, t) {const delay = t || 500;let timer;// eslint-disable-next-line func-namesreturn function () {// eslint-disable-next-line prefer-rest-paramsconst args = arguments;if (timer) {clearTimeout(timer);}const context = this;timer = setTimeout(() => {timer = null;fn.apply(context, args);}, delay);};},// 获取缩放比例getScale() {// console.log(window.innerHeight, window.innerWidth);const w = window.innerWidth / this.w;const h = window.innerHeight / this.h;return w < h ? w : h;// return {w, h};},// 设置缩放比例setScale() {this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;},},beforeDestroy() {window.removeEventListener('resize', this.onresize);},
}
</script><style lang='scss' scoped>
.screen-adapter {width: 100vw;min-height: 100%;max-height: 100vh;overflow: hidden;// 添加一个背景色，在适配不成功（上下或者左右有空白时）这个背景色和大屏主题色相似，一定程度上看不出来；该方案只在适配要求不高(只做常规屏幕适配)情况下适用background: #071524;.content-wrap {transform-origin: 0 0;position: absolute;top: 50%;left: 50%;}
}
</style>

2. 使用自适应组件

<template>  <screen-adapter><!-- 大屏内容组件 --><big-screecn-page></big-screecn-page></screen-adapter>
</template><script>
import ScreenAdapter from '@/components/screenAdapter/index';
import BigScreecnPage from '@/views/bigScreen/index'export default {name: 'Index',components: {ScreenAdapter,BigScreecnPage}
}

ps：该方案只在适配要求不高(只做常规屏幕适配)情况下适用；在非常规屏幕下，可能在屏幕上下或者左右出现留白，在适配组件里加了一个大屏主题色相似的背景颜色，可以优化这一问题（混淆视听），哈哈哈

如果想要处理非常规屏幕的留白问题，可以参考：可视化大屏自适应方案

二、自动全屏实现

1. 使用`screenfull`插件 (推荐)

快速开始

使用方法

首先安装 npm install screenfull --save
在使用.vue文件中引入 import screenfull from ‘screenfull’
在按钮方法中调用 screenfull.toggle()
还可以检测全屏状态 screenfull.isFullscreen
测试浏览器是否支持全screenfull screenfull.isEnabled

API (`重点`)

request(ele) 全屏
exit() 退出全屏
toggle() 切换全屏
on(event, function) ： event为 ‘change’ | ‘error’ 注册事件
off(event, function) ：移除前面已经注册的事件
element：返回一个全屏的dom节点，如果没有就为 null
isFullscreen : 是否是全屏状态
isEnabled ：判断是否支持全屏

使用注意事项

requestFullscreen方法只能由用户触发。
页面跳转需先退出全屏
进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效
解决方案：使用 :full-screen伪类为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）
我这里是使用原生的方法修改了css
5.一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏

使用时出现编译错误

提示：在vue项目中导入screenfull插件，出现编译错误，错误如图所示：
在这里插入图片描述
这是因为安装的screenfull插件版本过高，降低插件版本即可：npm install screenfull@4.2.0 --save

参考文章：https://blog.csdn.net/weixin_45665171/article/details/129799619

具体使用实例：

// 一些代码实在vue3中编写
import screenfull from 'screenfull';onMounted(() => { setTimeout(() => {const thisPageEl = document.querySelector('.big-screen-page-box');thisPageEl && screenfull.request(thisPageEl);}, 50);
});
onUnmounted(() => {screenfull.exit();});