微信小游戏屏幕适配方案

参考：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元素自动对齐到可见区域