1.在public文件夾中新建一個flexs.js文件

//flexs.js (function(win) {var bodyStyle = document.createElement('style');// 這里根據具體的設計稿尺寸來定bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`;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();win.addEventListener('pageshow',function(e) {if (e.persisted) {// 瀏覽器后退的時候重新計算refreshScale();}},false);win.addEventListener('resize', refreshScale, false); })(window);

2.在index.html文件中引入文件

<!-- 引入flexs.js --><script type="text/javascript" src="<%= BASE_URL %>flexs.js"></script>

總結

以上是生活随笔為你收集整理的vue 数据看板大屏适配方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。