LAYA屏幕适配

相关概念

1、物理分辨率：简单来讲，就是设备像素，也就是一般人所理解的屏幕尺寸，例如 iPhone8 的物理分辨率是1334 × 750

2、缩放因子：机型物理分辨率也越来越高，一个point所占用的物理像素越来越高，缩放因子表达式为@nX，也就是在这个机型上1个point 用n×n的物理像素矩阵来表示

3、逻辑分辨率：就是就是软件所使用的分辨率。物理分辨率/逻辑分辨率  = 缩放因子

4、设备像素比DPR (Device Pixel Ratio)：也就是缩放因子，LayaAir引擎中通过 Laya.Browser.pixelRatio 可以获得浏览器的DPR值，LAYA引擎中强制加入<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>，禁止用户进行手动缩放

5、逻辑宽高：逻辑分辨率的宽高。浏览器会根据DPR的值决定一个CSS占用多少个像素，例如DPR为3时，1个CSS像素就占用3×3个物理像素。LayaAir引擎里可以通过Laya.Browser.clientWidth获取逻辑分辨率的宽，通过Laya.Browser.clientHeight获取逻辑分辨率的高。在PC浏览器中，则是获取的浏览器窗口可视宽高。

6、物理宽高：就是物理分辨率，设备（的显示器）宽高。LayaAir引擎中的物理宽高是通过逻辑宽高*DPR计算而来。要注意奇葩的iPhone6/7/8各Plus机型，逻辑分辨率是736×414，DPR的值是3，相乘得到的结果显然与真实的各Plus机型物理分辨率1920×1080不符合。但是不用担心iPhone6/7/8各Plus机型适配错误，由于LayaAir引擎在入口网页的meta标签中用 viewport进行了相关的配置，所以会按DPR自动进行缩放，最终会自动缩放到对应到实际的物理分辨率。

7、设计宽高：开发者在设计产品时采用的宽高，就是用LAYA编辑器项目设置里面的设计宽高。主要分两类，一类是宽高比约为1:1.78的非全面屏手机，另一类是宽高比约为1:2.17全面屏手机。基于性能优先的原则，通常开发者都会选择分辨率小一些的作为主效果设计，然后向其它比例屏幕进行适配。常见的宽750高1334或宽720高1280。

8、画布宽高：<canvas>的 width、heigth 属性就是画布宽高。画布宽高在noscale、exactfit、noborder这几个LayaAir引擎适配模式下会直接采用设计宽高值，其它适配模式下，会根据适配规则产生变化。

9、适配宽高：适配宽高才是适配规则处理后的最终效果宽高，会直接影响通过DPR还原后的最终效果。Canvas是基于位图像素绘图的，画布宽高对画面质量及性能有影响，又或者诸如plus特殊的分辨率等问题。所以不能通过直接改变画布宽高来适配。在LayaAir引擎中会根据不同的适配模式规则，计算出适配宽高需要缩放的比例，然后通过transform的matrix（矩阵）来对画布缩放至逻辑分辨率范围内，再通过viewport与DPR机制缩放还原。

10、舞台宽高：LayaAir引擎的stage宽高。stage宽高的变化并不会影响到画面的大小，但stage范围内，可以控制显示，可以进行事件监听，碰撞检测等。默认情况下，stage宽高直接等于设计宽高。在full、fixedwidth、fixedheight、fixedauto的适配模式下，stage宽高会根据适配规则产生变化。

 

屏幕适配模型举例：