简单三步完成cocos多屏幕适配方案

智能手机越来越多，如今手机屏幕也越来越奇葩。什么18:9，19:9，19.5:9加刘海..

那么如果还使用初始canvas设计分辨率进行开发会发现左右有两条黑边无法铺满。再加上苹果即将出现的新政策：必须适配刘海屏，否则下架，没办法了，那就适配呗。这个方案提供三个步骤。

• 首先，外层canvas将自动拉伸高度点上，长度不要勾选，否则背景图的比例会被拉伸，很难看的

  
  只要勾选高度，长度不要勾选.png

• 第二步，找美工把背景图修改到长宽比2.16以上，具体计算公式为 长边/短边
  例如新安卓大部分采用的18:9屏幕，长宽比为 2.1 ，那么背景如果是720P的设计分辨率就需要是1440*720

考虑到iPhoneX屏幕为19.5:9，所以要适配iPhone就至少要是2.17的长宽比，即720P的设计分辨率，那么背景图就要是1560*720。注意只需一张最长宽高比的即可，修改后效果如下

修改后.png

• 最后一步，将需要操作的元素块加上widget控件，例如我需要将这个按钮无限靠右上角，通常的做法是手动移动到需要的位置。但是这样会导致背景即使铺满但元素依然在靠中间的canvas内的位置，如上图。解决方案便是使用widget控件。

  
  使用widget控件.png

此处注意target要将最外层做过适配的canvas作为参照父节点，其他数值可按实际需求进行更改。

此致，结束。简单三步，解决你的多分辨率适配问题。