最近遇到大屏適配的項(xiàng)目，網(wǎng)上也查找了許多資料，經(jīng)過多次驗(yàn)證，以下面這個(gè)方案稍算簡潔。
一、設(shè)計(jì)尺寸
- 項(xiàng)目的設(shè)計(jì)尺寸為1920*1080（設(shè)計(jì)尺寸會(huì)對(duì)后面的適配有影響）
二、在public文件夾中新建一個(gè)flexs.js文件，然后填充如下代碼：
//flexs.js
(function(win) {
var bodyStyle = document.createElement('style');
// 這里根據(jù)具體的設(shè)計(jì)稿尺寸來定
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, // 這里根據(jù)具體的設(shè)計(jì)稿尺寸來定
designHeight = 1080, // 這里根據(jù)具體的設(shè)計(jì)稿尺寸來定
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`;
// 應(yīng)對(duì)瀏覽器全屏切換前后窗口因短暫滾動(dòng)條問題出現(xiàn)未占滿情況
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 + ',' + heightRatio + ');transform-origin:left top;overflow: hidden;';
}, 0);
}
refreshScale();
win.addEventListener(
'pageshow',
function(e) {
if (e.persisted) {
// 瀏覽器后退的時(shí)候重新計(jì)算
refreshScale();
}
},
false
);
win.addEventListener('resize', refreshScale, false);
})(window);
三、在index.html文件中引入文件
<body>
<div id="app"></div>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
<!-- 引入flexs.js -->
<script type="text/javascript" src="<%= BASE_URL %>flexs.js"></script>
四、消除滾動(dòng)條—在App.vue文件中，寫入以下代碼：
<style lang="scss">
body::-webkit-scrollbar {
display: none;
}
</style>
好了，現(xiàn)在你就可以愉快的按照設(shè)計(jì)圖尺寸寫代碼了。當(dāng)然，要想看實(shí)際效果，還是需要按F11進(jìn)入全屏模式才行。
