ITPub博客

首页 > 应用开发 > C/C++ > 游戏陪玩源码的移动端适配,应该如何实现?

游戏陪玩源码的移动端适配,应该如何实现?

C/C++ 作者:云豹科技程序员 时间:2021-09-25 17:03:14 0 删除 编辑

在游戏陪玩源码中,为了保证用户更好的使用效果需要进行移动端的适配操作,对于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


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69996194/viewspace-2793682/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2021-03-10

  • 博文量
    234
  • 访问量
    65732