辛辛苦苦开发好小游戏，打包到微信小游戏平台发现页面适配有问题是不是很慌！

请看这里，首先呢，laya自带了适配模式。这里一般都是使用

GameConfig.scaleMode ="fixedwidth";

这个适配方案会等比例横向拉伸你的游戏尺寸，比如你设计的是 750 * 1334 尺寸，他会根据不同屏幕将你的尺寸按 当前屏幕/750 基准去缩放。

那么问题来了，为什么要设计 750*1334呢，因为这是大部分手机缩放比例 750/1334=0.52。

经过这一步操作后你看到游戏基本已经适配大半了，不过还是有问题，比如底部会有黑边，是因为这个模式只是按横向缩放的。

如何解决黑边呢？

下一步：

// 是否需要适配
this.isNeedSp = Math.round(Laya.Browser.clientWidth / Laya.Browser.clientHeight * 100) === 56 ? false : true;
this.trueRatio = Laya.Browser.clientWidth / Laya.stage.width; ///  xxx/750 算出相对比例 0.52
this.trueHiRatio = Laya.Browser.clientHeight / Laya.stage.height; ///  xxx/1334 算出相对比例 0.52
this.trueStageHeight = Laya.Browser.clientHeight / this.trueRatio; // 舞台的真实高度，一般用于填满背景图
// 相对于元素750基准
this.trueSpriceRatio = this.trueStageHeight / 1334;

第一行是要计算是否需要适配，全局变量，按需判断即可。

第二行是算出缩放比存全局

第三行是算出纵向缩放比存全局【这一步一般可以忽略，我一般特别精细计算会用到，因为我们现在用的是横向缩放】

第四行我一般喜欢先存一个真实的舞台高度给全局使用

第五行是关键一步就是纵向元素基准判断，这样页面设计的元素 * trueSpriceRatio 就得到真实缩放后的元素尺寸，在每个UI模块下，做下初始化适配即可。

比如我需要校准我的小游戏一些元素位置和宽高就这么写：

以上就是layabox小游戏适配方案全部内容,感谢大家支持自学php网。