egret eui 响应式布局

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');
        }
    }
原文地址:https://www.cnblogs.com/luguiqing/p/9525087.html