转载自：
https://www.jianshu.com/p/e30442d38c64
1. 设置多种分辨率
在正式开始之前，我们可能还需要完成一个前置步骤，也是很重要的一步——
设置各种各样的分辨率去验证我们当前方案是否能完美适配
Cocos Creator 已经帮我们内置了部分手机的分辨率设置，比如我们运行游戏在网页上进行调试时，可以在浏览器左上角上可以选择不同机型以作为预览的分辨率
Multi-resolution choice
但是，内置的部分机型的分辨率并不足以完成我们多分辨率适配的测试，既然我们要做多分辨率测试，那么我们可能需要极端一点的，比如：100×100，200×400等诸如此类分辨率的作为测试用例参考，那么我们应该怎么设置呢？
Cocos Creator 网页预览模板在运行前会加载
boot.js
文件，在这份文件中，我们可以定义我们期望的设计分辨率，以下为
boot.js
文件在不同平台上的路径
-
Windows:
C:\CocosCreator\resources\static\preview-templates\boot.js
-
Mac:
/Applications/CocosCreator.app/Contents/Resources/static/preview-templates/boot.js
打开上述路径的
boot.js
文件，在 devices 中添加下面我们期望的分辨率内容即可：
比如，填入下面这份参考的分辨率
{ name: 'Apple iPhone X/XS', width: 375, height: 812, ratio: 3 },
{ name: 'Apple iPhone XS Max', width: 414, height: 896, ratio: 3 },
{ name: 'Apple iPhone XR', width: 414, height: 896, ratio: 2 },
{ name: 'MX4', width: 576, height: 960 , ratio: 2 },
填好后，大概这样子
boot.js
然后刷新我们的游戏在浏览器中的页面，就可以在左上角的机型选择中找到我们刚刚添加的几个机型了
result
了解和上面这些操作之后，我们以后就可以随时添加不同分辨率了。
1.1 疑问
Q1：机型分辨率怎么查？
可以自行上该机型官网查询该机型参数，得到实际分辨率
Q2：ratio 是什么意思？
相当于分辨率比率，比如：
1080×1920
的分辨率可以写成
{ name: 'ratio 1', width: 1080, height: 1920 , ratio: 1 },
{ name: 'ratio 2', width: 540, height: 960 , ratio: 2 },
{ name: 'ratio 3', width: 360, height: 640 , ratio: 3 },
以上写法都是等价的，皆都代表实际分辨率为 1080×1920 。那么既然都是表示一样的分辨率，那么为什么还存在ratio这个参数呢，这个参数的意义在哪里呢？
我们先来看一组直观的实际运行结果，同一个场景对应上面3个分辨率设置：
ratio test
可以看到 ratio 1 预览分辨率太大，右方和下方都出现滚动条了，而 radio 2 和 radio 3 则不会。到这里，相信大家已经对 ratio 有一定概念
配合width，height参数，我们整理一下，用文字解释归纳一下：
当前设备的宽高如下：
-
实际宽度
：
width x ratio
-
实际高度
：
height x ratio
-
预览宽度
：
width
-
预览高度
：
height
2. 设计我们的测试分辨率
完成上一节的阅读之后，相信你已经了解如何设置多分辨率预览模式。
为了支持我们的多分辨率完美适配，我们将以
720x1280(9:16)
的分辨率作为设计分辨率，同时设置下面4组分辨率去作为我们的测试分辨率，去模拟实际情况下，有可能出现的不同宽高比。
{ name: '720x1280', width: 360, height: 640, ratio: 2 },
{ name: '640x1280', width: 320, height: 640, ratio: 2 },
{ name: '800x1280', width: 400, height: 640, ratio: 2 },
{ name: '720x1360', width: 360, height: 680, ratio: 2 },
{ name: '720x1200', width: 360, height: 600, ratio: 2 },