laya之微信 屏幕适配---理解canvas，手机设备，设计ui之间的关系

首先   层级 包含关系   手机设备屏（画布canvas   （设计ui））

举例说明

比如ui设计720*1080.  那么在laya中我们初始化引擎会设置画布canvas为720*1080；但是由于机型各种各样，当设配宽高大于canvas时，微信会自动将canvas拉伸与设配相等。那么ui也会随之被拉伸不符合原设计效果。

此时我们需要将canvas的宽设与设备屏宽近似相等，一般取ui的宽720.（机型宽375物理像素，所以*2）我们通过调用微信接口获取设配宽高并求出设备的宽高比。如下图。

wx.getSystemInfo({
      success:function(res){
          //引擎初始化
          var b = res.screenHeight * 720 / res.screenWidth;
          Laya.MiniAdpter.init();
          Laya.init(720, b, WebGL);
          Laya.stage.alignV = Laya.stage.ALIGN_MIDDLE;
          Laya.stage.alignH = Laya.stage.ALIGN_CENTER;
          //Laya.Stat.show();
          //Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;
          Laya.loader.load(Config.res,Handler.create(this,showApe));

      }
    })

 

但是当设备为720*1500。那么因为ui的宽高与canvas不等就会出现黑边。

 

此时的适配策略？

在Laya.stage上面加一张720*2100的背景图（高大一点）。算出设配与ui高的差值，将ui居中显示。（注意ui需添加到容器，不能是舞台）；