LayaAir屏幕适配

LayaAir屏幕适配

官方教程链接：LayaAir实战开发11-屏幕适配

屏幕适配

随着移动端设备(手机、平板、电视)的增多，设备碎片化、屏幕碎片化的程度也在不断增加，而我们今天要探讨的，则是对游戏显示影响比较大的屏幕碎片化。

为了更深入的了解屏幕适配，我们先从Iphone屏幕分辨率发展说起：

在早先的移动设备中，屏幕像素都比较低，如 Iphone3，它的分辨率为320480，在Iphone3上，一个像素等于一个屏幕物理像素。后来随着设备屏幕像素密度越来越高，从iphone4开始，苹果推出了Retina屏，分辨率变成了640960，提高一倍，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这提高的就是devicePixelRatio，其他安卓移动设备也类似与此。

所以我们得出一个公式： 物理分辨率=像素分辨率*devicePixelRatio;

引擎对上述两种分辨率做了封装。

设备像素分辨率:Laya.Browser.clientWidth，Laya.Browser.clientHeight;

设备物理分辨率：Laya.Browser.width，Laya.Browser.height;

像素比：Laya.Browser.pixelRatio;

默认从浏览器获得的clientWidth不是像素分辨率，而是经过缩放过的分辨率，想要获得正确的分辨率，需要在html页面内设置viewport meta标签，设置content的值为"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"。

<meta name='viewport' content='width=device-width,
initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no'/>

在LayaAir引擎内，如果页面未设置过viewport标签，则引擎会自动生成一个，以确保获取的正确宽高。

适配模式

LayaAir提供了多种适配模式供使用者选择，可以通过scaleMode属性进行设置，scaleMode有如下可选值：

noscale：应用保持设计宽高不变，不缩放不变形，stage的宽高等于设计宽高。

exactfit：应用根据屏幕大小铺满全屏，非等比缩放会变形，stage的宽高等于设计宽高。

showall：应用显示全部内容，按照最小比率缩放，等比缩放不变形，一边可能会留空白，stage的宽高等于设计宽高。

noborder：应用按照最大比率缩放显示，宽或高方向会显示一部分，等比缩放不变性，stage的宽高等于设计宽高。

full：应用保持设计宽高不变，不缩放不变形，stage的宽高等于屏幕宽高。

fixedwidth：应用保持设计宽度不变，高度根据屏幕比缩放，stage的宽度等于设计宽度，高度根据屏幕比率大小而变化。

fixedheight：应用保持设计高度不变，宽度根据屏幕比缩放，stage的高度等于设计宽度，宽度根据屏幕比率大小而变化。

比较常用的缩放模式有，showall，full，fixedwidth，fixedheight，具体用哪种适配模式，需要大家自己来衡量。

对齐模式

不仅可以设置非全屏缩放模式，比如noscale，showall，则还可以使用对齐模式进行对齐。

alignH：水平对齐方式，有"left"，"center"，"right"三种值可选。

alignV：垂直对齐方式，有"top"，"middle"，"bottom"三种值可选。

横竖屏设置

通过screenMode属性，可以设置游戏的横竖屏，在手机浏览器发生旋转后，还能正确的显示，有以下值可以选择。

"none" ：不更改屏幕。

"horizontal" ：自动横屏。

"vertical" ：自动竖屏。