本系列教程指引：

1. Cocos Creator 多分辨率完美适配系列-1（现状与最终效果）
2. Cocos Creator 多分辨率完美适配系列-2（部署验证设置）
3. Cocos Creator 多分辨率完美适配系列-3（背景适配实现）
4. Cocos Creator 多分辨率完美适配系列-4（内容适配实现）
5. Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）
6. Cocos Creator 多分辨率完美适配系列-6（刘海屏适配）
7. Cocos Creator 多分辨率完美适配系列-7（封装库使用）

1. 设置多种分辨率

在正式开始之前，我们可能还需要完成一个前置步骤，也是很重要的一步——设置各种各样的分辨率去验证我们当前方案是否能完美适配

Cocos Creator 已经帮我们内置了部分手机的分辨率设置，比如我们运行游戏在网页上进行调试时，可以在浏览器左上角上可以选择不同机型以作为预览的分辨率

Multi-resolution choice

但是，内置的部分机型的分辨率并不足以完成我们多分辨率适配的测试，既然我们要做多分辨率测试，那么我们可能需要极端一点的，比如：100x100，200x400等诸如此类分辨率的作为测试用例参考，那么我们应该怎么设置呢？

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 是什么意思？

相当于分辨率比率，比如： 1080x1920 的分辨率可以写成

{ 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 },

以上写法都是等价的，皆都代表实际分辨率为 1080x1920 。那么既然都是表示一样的分辨率，那么为什么还存在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: '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 },

至此，本章完毕。

3. 进入下一个章节

本系列教程指引：

1. Cocos Creator 多分辨率完美适配系列-1（现状与最终效果）
2. Cocos Creator 多分辨率完美适配系列-2（部署验证设置）
3. 👉Cocos Creator 多分辨率完美适配系列-3（背景适配实现）
4. Cocos Creator 多分辨率完美适配系列-4（内容适配实现）
5. Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）
6. Cocos Creator 多分辨率完美适配系列-6（刘海屏适配）
7. Cocos Creator 多分辨率完美适配系列-7（封装库使用）