在遊戲陪玩原始碼中，為了保證使用者更好的使用效果需要進行移動端的適配操作，對於iOS系統而言還相對簡單一些，畢竟型號比較少，但是對於Android系統來說就比較麻煩了，但是遊戲陪玩原始碼的移動端適配並不能因為麻煩而省去。

vue

適配js檔案，在src下面建立一個js資料夾，將以下程式碼生產js檔案放置進去。

export default function(win, px) {
    var remCalc = {};
    var docEl = win.document.documentElement,
        tid;
    function refreshRem() {
        // 獲取當前視窗的寬度
        var width = docEl.getBoundingClientRect().width;
        // 大於1242px 按1242算
        if (width > px) {
            width = px;
        }
        // 適配摺疊屏
        if (width > 540) {
            width = 540;
        }
        var rem = (width / px) * 100; // cms 只要把這行改成  var rem = width /1242 * 100
        docEl.style.fontSize = rem + 'px';
        remCalc.rem = rem;
        //誤差、相容性處理
        var actualSize = parseFloat(window.getComputedStyle(document.documentElement)['font-size']);
        if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
            var remScaled = (rem * rem) / actualSize;
            docEl.style.fontSize = remScaled + 'px';
        }
    }
    //函式節流，避免頻繁更新
    function dbcRefresh() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 100);
    }
    //視窗更新動態改變font-size
    win.addEventListener(
        'resize',
        function() {
            dbcRefresh();
        },
        false    );
    //頁面顯示的時候再計算一次   難道切換視窗之後再切換來視窗大小會變?....
    win.addEventListener(
        'pageshow',
        function(e) {
            if (e.persisted) {
                dbcRefresh();
            }
        },
        false    );
    refreshRem();
    remCalc.refreshRem = refreshRem;
    remCalc.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    };
    remCalc.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    };
    win.remCalc = remCalc;}

在main.js中引入文件，根據設計稿設定頁面大小使用即可。

// 引入remimport rem from './js/public';rem(window, 1242);

html裡面使用適配
js部分：

let win = window;let px = 1242;var remCalc = {};var docEl = win.document.documentElement,
    tid;function refreshRem() {
    // 獲取當前視窗的寬度
    var width = docEl.getBoundingClientRect().width;
    // 大於1242px 按1242算
    if (width > px) {
        width = px;
    }
    // // 適配摺疊屏
    // if (width > 540) {
    //     width = 540;
    // }
    var rem = (width / px) * 100; // cms 只要把這行改成  var rem = width /1242 * 100
    docEl.style.fontSize = rem + 'px';
    remCalc.rem = rem;
    //誤差、相容性處理
    var actualSize = parseFloat(window.getComputedStyle(document.documentElement)['font-size']);
    if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
        var remScaled = (rem * rem) / actualSize;
        docEl.style.fontSize = remScaled + 'px';
    }}//函式節流，避免頻繁更新function dbcRefresh() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 100);}//視窗更新動態改變font-sizewin.addEventListener(
    'resize',
    function () {
        dbcRefresh();
    },
    false);//頁面顯示的時候再計算一次   難道切換視窗之後再切換來視窗大小會變?....win.addEventListener(
    'pageshow',
    function (e) {
        if (e.persisted) {
            dbcRefresh();
        }
    },
    false);refreshRem();remCalc.refreshRem = refreshRem;remCalc.rem2px = function (d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === 'string' && d.match(/rem$/)) {
        val += 'px';
    }
    return val;};remCalc.px2rem = function (d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === 'string' && d.match(/px$/)) {
        val += 'rem';
    }
    return val;};win.remCalc = remCalc;

具體使用
直接在script裡面引入使用即可。

<!DOCTYPE html><html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box {
                width: 10rem;
                height: 10rem;
                background: red;
            }
        </style>
        <script src="./public.js"></script>
    </head>
    <body>
        <div id="box"></div>
    </body></html>

在這裡插入圖片描述

以上就是“如何做好遊戲陪玩原始碼的移動端適配？”的全部內容了，希望對大家開發遊戲陪玩原始碼有所幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：https://blog.csdn.net/m0_52773472/article/details/120440349

遊戲陪玩原始碼的移動端適配，應該如何實現？

相關文章