轉載自：https://www.jianshu.com/p/e30442d38c64
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: '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 },