参考：https://blog.csdn.net/tianbo_zhang/article/details/80321972
工具
- 引擎：LayaAir
- 语言：AS3
声明
- 没有全能的适配方案
- 16/9是大部分手机的比例
- 尽量适配大部分手机，尽量做到不剪裁和不黑边
舞台Stage.as的屏幕相关内容
/**自动横屏。*/
public static const SCREEN_HORIZONTAL:String = "horizontal";
/**自动竖屏。*/
public static const SCREEN_VERTICAL:String = "vertical";
/**不缩放不变型，内容大于屏幕被裁切，小于屏幕出现黑边,stage的宽高等于设计宽高。*/
public static const SCALE_NOSCALE:String = "noscale";
/**应用根据屏幕大小铺满全屏，非等比缩放会变型*/
public static const SCALE_EXACTFIT:String = "exactfit";
/**应用显示全部内容，按照最小比率缩放，等比缩放不变型，一边可能会黑边*/
public static const SCALE_SHOWALL:String = "showall";
/**应用按照最大比率缩放显示，宽或高方向会显示一部分，等比缩放不变型，超过屏幕部分被裁切*/
public static const SCALE_NOBORDER:String = "noborder";
/**应用保持设计宽高不变，不缩放不变型,超出屏幕部分被裁切*/
public static const SCALE_FULL:String = "full";
/**应用保持设计宽度不变，高度根据屏幕比缩放，高度根据屏幕比率大小而变化，高度不够会黑边*/
public static const SCALE_FIXED_WIDTH:String = "fixedwidth";
/**应用保持设计高度不变，宽度根据屏幕比缩放，stage的高度等于设计宽度，宽度根据屏幕比率大小而变化*/
public static const SCALE_FIXED_HEIGHT:String = "fixedheight";
/**应用保持设计比例不变，全屏显示全部内容(类似showall，但showall非全屏，会有黑边)
根据屏幕长宽比，自动选择使用SCALE_FIXED_WIDTH或SCALE_FIXED_HEIGHT*/
public static const SCALE_FIXED_AUTO:String = "fixedauto";
注意：stage的宽高等于设计宽高
适配参考代码：
public function LayaUISample() {
//初始化微信小游戏
MiniAdpter.init(true);
//屏幕比例
var screenRatio:Number = Browser.height / Browser.width;
//小于4/3一般不存在，一般是pc网页
if(screenRatio <= 4/3){
Laya.init(750 * 4/3, 1334,WebGL);
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
Laya.stage.alignH = Stage.ALIGN_CENTER;
}else if(screenRatio <= 16/9){
Laya.init(0, 1334,WebGL);
//fixedheight:按屏幕宽高等比缩放，高度不变，宽度适配（设计高度*屏幕宽高比），宽度超出会裁切
Laya.stage.scaleMode = Stage.SCALE_FIXED_HEIGHT;
}else if(screenRatio <= 18/9){
Laya.init(750, 750 * screenRatio,WebGL);
//等比缩放，按屏幕宽高与设计比例最小比率等比缩放，可能会黑边
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
Laya.stage.alignV = Stage.ALIGN_BOTTOM;
}
//大于18/9的认为是特别高的屏幕，iphoneX
else{//判断为有刘海的屏幕（iponeX）
GlobalData.hasBang = true;
Laya.init(750, 1624, WebGL);
Laya.stage.scaleMode = Stage.SCALE_FIXED_WIDTH;
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
}
}
其他引擎的参考方案
- 白鹭的适配方案:noscale,exactfit,showall,noborder
- cocos的策略:适配高度或宽度或根据宽高比自动选择，裁剪背景图，避免黑边或空白，设置子UI元素自动对齐到可见区域
