机械建设网站制作/无代码网站开发平台

这里会说两种情况下的适配方式及应用：

1. 整系统所有页面都是大屏可视化系统
2. 部分页面是大屏页面，部分是后台管理页面，两者共存的整系统

第一种情况：

项目中public文件夹里的入口文件 index.html 里直接引入适配代码文件即可。
截图说明及代码如下所示：

public目录

index.html文件

flexable.js代码

// 数据大屏适配
(function (win) {var bodyStyle = document.createElement("style");// 这里根据具体的设计稿尺寸来定bodyStyle.innerHTML = `body{width:1920px; height:1080px; transform:scale(1);}`;document.documentElement.firstElementChild.appendChild(bodyStyle);function refreshScale() {let docWidth = document.documentElement.clientWidth;let docHeight = document.documentElement.clientHeight;var designWidth = 1920, // 这里根据具体的设计稿尺寸来定designHeight = 1080, // 这里根据具体的设计稿尺寸来定widthRatio = docWidth / designWidth,heightRatio = docHeight / designHeight;document.body.style = `transform:scale(${widthRatio});transform-origin:left top;overflow: hidden;`;// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况setTimeout(function () {var lateWidth = document.documentElement.clientWidth,lateHeight = document.documentElement.clientHeight;if (lateWidth === docWidth) return;widthRatio = lateWidth / designWidth;heightRatio = lateHeight / designHeight;document.body.style ="transform:scale(" +widthRatio +");transform-origin:left top;overflow: hidden;";}, 0);}refreshScale();// pageshow事件: 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。// (这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)win.addEventListener("pageshow",function (e) {if (e.persisted) {// 判断该页面是否被缓存，如果是，则调用方法// 浏览器后退的时候重新计算refreshScale();}},false);win.addEventListener("resize", refreshScale, false);
})(window);

第二种情况：

使用 mixin 混入方式仅在大屏页面引入使用即可。
截图说明及代码如下所示：

<template><div id="data-view"><div id="full-screen-container"><div class="main-header">header</div><div class="main-body">body</div></div></div>
</template>

import { autoResize } from "@/mixin/autoResize";export default{mixins: [autoResize],
}

autoResize.js代码

export const autoResize = {mounted() {var bodyStyle = document.createElement("style");// 这里根据具体的设计稿尺寸来定bodyStyle.innerHTML = `#full-screen-container{width:1920px; height:1080px; transform:scale(1);}`;document.documentElement.firstElementChild.appendChild(bodyStyle);this.refreshScale();window.addEventListener("pageshow", this.pageshowFunc, false);window.addEventListener("resize", this.refreshScale, false);},methods: {refreshScale() {let docWidth = document.documentElement.clientWidth;let docHeight = document.documentElement.clientHeight;var designWidth = 1920, // 这里根据具体的设计稿尺寸来定designHeight = 1080, // 这里根据具体的设计稿尺寸来定widthRatio = docWidth / designWidth,heightRatio = docHeight / designHeight;// 获取大屏页面容器 DOMvar fullScreenDom = document.getElementById("full-screen-container");fullScreenDom.style = `transform:scale(${widthRatio});transform-origin:left top;overflow: hidden;`;// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况setTimeout(function () {var lateWidth = document.documentElement.clientWidth,lateHeight = document.documentElement.clientHeight;if (lateWidth === docWidth) return;widthRatio = lateWidth / designWidth;heightRatio = lateHeight / designHeight;fullScreenDom.style ="transform:scale(" +widthRatio +");transform-origin:left top;overflow: hidden;";}, 0);},// pageshow事件: 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。// (这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)pageshowFunc(e) {if (e.persisted) {// 判断该页面是否被缓存，如果是，则调用方法// 浏览器后退的时候重新计算this.refreshScale();}},},beforeDestroy() {window.removeEventListener("pageshow", this.pageshowFunc);window.removeEventListener("resize", this.refreshScale);},
};