本系列教程指引：
- Cocos Creator 多分辨率完美適配系列-1（現(xiàn)狀與最終效果）
- Cocos Creator 多分辨率完美適配系列-2（部署驗(yàn)證設(shè)置）
- Cocos Creator 多分辨率完美適配系列-3（背景適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-4（內(nèi)容適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-5（貼邊欄動(dòng)畫實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-6（劉海屏適配）
- Cocos Creator 多分辨率完美適配系列-7（封裝庫使用）
1. 設(shè)置多種分辨率
在正式開始之前耘子，我們可能還需要完成一個(gè)前置步驟森缠，也是很重要的一步——設(shè)置各種各樣的分辨率去驗(yàn)證我們當(dāng)前方案是否能完美適配
Cocos Creator 已經(jīng)幫我們內(nèi)置了部分手機(jī)的分辨率設(shè)置踱葛，比如我們運(yùn)行游戲在網(wǎng)頁上進(jìn)行調(diào)試時(shí)削锰，可以在瀏覽器左上角上可以選擇不同機(jī)型以作為預(yù)覽的分辨率
但是遵绰，內(nèi)置的部分機(jī)型的分辨率并不足以完成我們多分辨率適配的測試较曼，既然我們要做多分辨率測試倾鲫，那么我們可能需要極端一點(diǎn)的贝搁，比如：100x100必逆，200x400等諸如此類分辨率的作為測試用例參考怠堪，那么我們應(yīng)該怎么設(shè)置呢？
Cocos Creator 網(wǎng)頁預(yù)覽模板在運(yùn)行前會(huì)加載 boot.js 文件名眉，在這份文件中粟矿，我們可以定義我們期望的設(shè)計(jì)分辨率，以下為 boot.js 文件在不同平臺(tái)上的路徑
- Windows:
C:\CocosCreator\resources\static\preview-templates\boot.js - Mac:
/Applications/CocosCreator.app/Contents/Resources/static/preview-templates/boot.js
打開上述路徑的 boot.js 文件损拢，在 devices 中添加下面我們期望的分辨率內(nèi)容即可：
比如陌粹，填入下面這份參考的分辨率
{ 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 },
填好后，大概這樣子
然后刷新我們的游戲在瀏覽器中的頁面福压，就可以在左上角的機(jī)型選擇中找到我們剛剛添加的幾個(gè)機(jī)型了
了解和上面這些操作之后掏秩，我們以后就可以隨時(shí)添加不同分辨率了。
1.1 疑問
Q1：機(jī)型分辨率怎么查荆姆？
可以自行上該機(jī)型官網(wǎng)查詢該機(jī)型參數(shù)蒙幻，得到實(shí)際分辨率
Q2：ratio 是什么意思？
相當(dāng)于分辨率比率胆筒，比如： 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 },
以上寫法都是等價(jià)的杆煞，皆都代表實(shí)際分辨率為 1080x1920 。那么既然都是表示一樣的分辨率腐泻，那么為什么還存在ratio這個(gè)參數(shù)呢决乎，這個(gè)參數(shù)的意義在哪里呢？
我們先來看一組直觀的實(shí)際運(yùn)行結(jié)果，同一個(gè)場景對(duì)應(yīng)上面3個(gè)分辨率設(shè)置：
可以看到 ratio 1 預(yù)覽分辨率太大，右方和下方都出現(xiàn)滾動(dòng)條了组砚，而 radio 2 和 radio 3 則不會(huì)。到這里范嘱，相信大家已經(jīng)對(duì) ratio 有一定概念
配合width，height參數(shù)员魏，我們整理一下丑蛤，用文字解釋歸納一下：
當(dāng)前設(shè)備的寬高如下：
-
實(shí)際寬度：
width x ratio -
實(shí)際高度：
height x ratio -
預(yù)覽寬度：
width -
預(yù)覽高度：
height
2. 設(shè)計(jì)我們的測試分辨率
完成上一節(jié)的閱讀之后，相信你已經(jīng)了解如何設(shè)置多分辨率預(yù)覽模式撕阎。
為了支持我們的多分辨率完美適配受裹，我們將以 720x1280(9:16) 的分辨率作為設(shè)計(jì)分辨率，同時(shí)設(shè)置下面4組分辨率去作為我們的測試分辨率，去模擬實(shí)際情況下棉饶，有可能出現(xiàn)的不同寬高比厦章。
{ 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. 進(jìn)入下一個(gè)章節(jié)
本系列教程指引：
- Cocos Creator 多分辨率完美適配系列-1（現(xiàn)狀與最終效果）
- Cocos Creator 多分辨率完美適配系列-2（部署驗(yàn)證設(shè)置）
- ??Cocos Creator 多分辨率完美適配系列-3（背景適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-4（內(nèi)容適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-5（貼邊欄動(dòng)畫實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-6（劉海屏適配）
- Cocos Creator 多分辨率完美適配系列-7（封裝庫使用）
