LayaBox的屏幕适配参数详解


请尊重原作者的工作,转载时请务必注明转载自:www.xionggf.com

本文内容是对LayaAir官网中关于屏幕适配网页的再整理

1 术语表

先了解一些本篇涉及的基础概念:

术语 含义 对应的Laya属性变量
设计宽高 在项目代码中初始化舞台的函数Laya.init()中定义的宽高即为设计宽高。 Laya.Stage.designWidth: 设计高度 Laya.Stage.designHeight: 设计宽度
Stage宽高 stage宽高为游戏舞台实际大小的宽高
适配宽高 通过引擎的适配模式对设计宽高进行缩放改变后的宽高,为了便于区分理解,我们称为适配宽高。
画布宽高 画布宽高是指HTML5中canvas节点的宽高,游戏中所有可见的内容都在画布区域内。
屏幕宽高 屏幕宽高是指手机浏览器屏幕的宽高,例如iphone6竖屏时的屏幕宽高为375*667。 laya.utils.Browser.clientWidth:手机浏览器客户区窗口的宽度 laya.utils.Browser.clientHeight: 手机浏览器客户区窗口的高度
物理宽高 关于设备屏幕的物理宽高,我们需要先了解像素密度的概念。在PC电脑上,通常一个像素位置上就是一个物理像素。在移动设备高速发展的今天,手机的屏幕上通常是一个像素位置上拥有2个或3个像素。例iphone6竖屏时的物理宽高为750*1334。 laya.utils.Browser.width:设备屏幕的物理宽度 laya.utils.Browser.height:设备屏幕的物理高度

2 屏幕适配的缩放模式参数

Laya.Stage.SCALE_EXACTFIT

应用会根据当前浏览器屏幕大小铺满整个浏览器窗口客户区。非等比缩放,所以图案会发生变型。laya stage的宽高等于设计宽高。其效果如下面的两个图所示:

Laya.Stage.SCALE_FIXED_HEIGHT

应用保持设计高度不变,宽度根据屏幕比缩放,stage的高度等于设计高度,宽度根据屏幕比率大小而变化。图案是不发生变型的。其效果如下面的图所示:

Laya.Stage.SCALE_FIXED_WIDTH

应用保持设计宽度不变,高度根据屏幕比缩放,stage的宽度等于设计宽度,高度根据屏幕比率大小而变化。(即是高度方向上当前能显示出多少内容,是需要实时根据当前的宽度是多少去算的)图案是不发生变型的。其效果如下面的图所示:

Laya.Stage.SCALE_FULL

应用保持设计宽高不变,不缩放不变形,stage的宽高等于屏幕宽高,效果如下面的两个图所示:

Laya.Stage.SCALE_NOBORDER

应用按照最大比率缩放显示,宽或者高方向会显示一部分,等比缩放不变形,stage的宽高等于设计宽高,效果如下面的两个图所显示:

Laya.Stage.SCALE_NOSCALE

应用保持设计宽高不变,不缩放不变形,stage的宽高等于设计宽高。
效果如下面的两个图所显示:

Laya.Stage.SHOWALL

应用显示全部内容,按照最小比率缩放,等比缩放不变形,一边可能会留有空白,stage的宽高等于设计宽高。效果如下图所示: