egret eui 响应式布局

Posted 2020-12-31 luguiqing

1. 自定义一个皮肤，然后在ts文件下加入这段代码

/**
 * eui.Component
 */
protected createChildren(): void {
    super.createChildren();
    this.left = 0;
    this.right = 0;
    this.top = 0;
    this.bottom = 0;
}

2. 通过切换不同的模式来支持移动端和PC端，fixedWidth和showAll两种缩放模式（对于移动端，涉及ipad等可能会出现高度不高导致内容被裁剪的，可以自行设置一定的比例，当宽/高比大于某个值时，切换回showAll模式）

　　//判斷是否是小游戏（不过发现这个可以不用考虑兼容问题，因为小游戏打包不会引入这个文件）
    if(!/MicroMessenger.*MiniGame/i.test(navigator.userAgent)){
        var stage = document.getElementById("egret");
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var isShowAll = (clientWidth/clientHeight) > (750/1150);//为了解决开始界面开始按钮内容被拦截
        //判断移动端还是pc端，以及尺寸
        if(!/android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || isShowAll){            
            stage.setAttribute("data-scale-mode",‘showAll‘);
        }
    }