CocosCreator H5小游戏屏幕适配解决方案

基础概念

1 物理分辨率

物理分辨率简单理解就是硬件所支持的分辨率，以像素（px）为单位，所以我们称这个硬件上的每一个像素点为物理像素，也叫设备像素。将屏幕实际存在的像素以行数 × 列数这样的数学表达方式体现出来，就是物理分辨率。比如 iPhone8 的物理分辨率是1334 × 750 。而我们进行屏幕适配时，表达方式会有所不同，会以屏幕宽的像素数量 × 屏幕高的像素数量这样来体现。例如 iPhone8在默认的竖屏状态下，物理分辨率表达为750 × 1334。横屏状态下，物理分辨率表达为1334 × 750 。所以大家需要能理解这些区别。

2 缩放因子与逻辑分辨率

2.1 缩放因子 起源

iOS绘制图形是以 point （pt）为单位，在早期的时候1 point=1 pixel。在2010年推出的iPhone4开始采用 Retina(视网膜) 屏幕显示技术 ，物理分辨率提升了4倍，此时，如果iPhone4还是1pt=1px这个方案，将会导致如下图一样的显示效果。

在图1中，按 iPhone3GS的320 × 480进行全屏设计，那在iPhone4下的显示效果则如图1左侧，原来的满屏内容只占了四分之一，其余部分留空。而按iPhone4分辨率 640 × 960进行全屏设计，那在iPhone3GS的屏幕下显示效果则如图1右侧，大量内容超出可显示区。

很显然，apple不会让图1的事情发生。实际上，iPhone4的缩放因子为@2X，也就是在这个机型上1个point 用2×2的像素矩阵来表示，如图2中效果所示，完美解决图1中可能发生的问题。

随着时代的发展，后续的机型物理分辨率也越来越高，1个point占用的物理像素也越来越多，见下图。

缩放因子的概念在安卓机型中也适用。

2.2 逻辑分辨率

逻辑分辨率简单理解就是软件所使用的分辨率，我们设计适配全靠他，也是用乘法数学表达方式来体现。为了更好的理解这个概念，我们先看一组数据表格。

通过图4的数据，我们可以看出，随着手机设备的更新，物理分辨率已经越来越高，如果我们按物理分辨率来进行屏幕适配，先不算安卓，光iPhone的机型就很碎片化了，还好，在缩放因子的作用下，我们看到逻辑分辨率基本上变化不大，所以我们后面讲的引擎适配，主要是针对逻辑分辨率进行适配。

3 设计宽高

设计宽高是开发者在设计产品时采用的宽高，面对众多机型，选择哪个作为设计宽高，也是一些新手开发者有点迷茫的，这里简单多说几句。

设计宽高，首先要考虑的是优先兼容多数的常用屏幕比例。通过上面图5的表格，我们看到去掉过时的机型，基本上手机屏幕就分两类，一类是宽高比约为1:1.78的非全面屏手机，另一类是宽高比约为1:2.17全面屏手机。各品牌的安卓机型屏幕比例，大多也是这两种或者接近这两种。

基于性能优先的原则(比如：游戏包大小)，通常开发者都会选择分辨率小一些的作为主效果设计，然后向其它比例屏幕进行适配。比如：常见的宽750高1334或宽720高1280。

以上宽高描述是指竖屏模式设计，横屏需反过来。

适配方案

1 竖屏游戏

在creator界面中，选中Canvas节点，勾选Fit Width选项。同时，画布内的所有节点通过Widget组件进行相对布局即可(如：所有节点都选择底部/顶部对齐)。

2 横屏游戏

在creator界面中，选中Canvas节点，勾选Fit Height选项。同时，画布内的所有节点通过Widget组件进行相对布局即可(如：所有节点都选择左部/右部对齐)。

至此，完毕。以上所述不作为官方适配定义，仅个人经验而谈。CocosCreator V2.1.2

iphoneX屏幕适配可以参考这篇帖子：https://blog.csdn.net/Mr_JiaTao/article/details/106410229