1. 預備知識

1.1 屏幕分辨率 設計分辨率

屏幕分辨率：設備的實際屏幕顯示分辨率
設計分辨率：制作場景使用的分辨率藍本，通常設計分辨率會使用市場里使用率最高的設備的屏幕分辨率

1.2 各種適配方案

EXACT_FIT 拉伸變形，鋪滿屏幕
NO_BORDER 按比例伸縮，全屏展示無黑邊（大圖裁剪、小圖無黑邊）
SHOW_ALL 按比例伸縮，全屏展示（大圖鋪滿屏幕，小圖留有黑邊）
FIXED_WIDTH 按照 窗體（手機）分辨率寬度/設計分辨率寬度 的比例，縮放設計分辨率畫面。這種設計分辨率，適合于豎版游戲。美術出底圖資源時，要保證高度足夠，否則會穿幫。
FIXED_HEIGHT 按照 窗體（手機）分辨率高度/設計分辨率高度 的比例，縮放設計分辨率畫面。這種設計分辨率，適合于橫版游戲。美術出底圖資源時，要保證寬度足夠，否則會穿幫。

1.3 美術圖片計算

圖片高度 = 屏幕像素高度 / (屏幕像素寬度 / 圖片像素寬度)

2. 深入代碼

先獲得openglView，如果為空就根據config.lua里的設計分辨率創建

local glview = sharedDirector:getOpenGLView()
if nil == glview then
    glview = cc.GLViewImpl:createWithRect("QuickCocos",
        cc.rect(0, 0, CONFIG_SCREEN_WIDTH or 900, CONFIG_SCREEN_HEIGHT or 640))
    sharedDirector:setOpenGLView(glview)
end

下面為config.lua的部分代碼，可以看出CONFIG_SCREEN_WIDTH和CONFIG_SCREEN_HEIGHT是設計分辨率

-- design resolution
CONFIG_SCREEN_WIDTH  = 640
CONFIG_SCREEN_HEIGHT = 960

可以通過glView獲得屏幕分辨率。下面的代碼需要注意一個地方：當CONFIG_SCREEN_WIDTH或高度為空的時候，會將屏幕分辨率賦值給它們。因為我們在config.lua里已經配置了，所以現在我們的CONFIG_SCREEN_WIDTH就是設計分辨率，當我們在使用player的時候，設計分辨率的寬和高會隨著我們選擇的機型的改變而改變

local size = glview:getFrameSize()
display.sizeInPixels = {width = size.width, height = size.height}

local w = display.sizeInPixels.width
local h = display.sizeInPixels.height

if CONFIG_SCREEN_WIDTH == nil or CONFIG_SCREEN_HEIGHT == nil then
    CONFIG_SCREEN_WIDTH = w
    CONFIG_SCREEN_HEIGHT = h
end

設置自動縮放值,如果當前屏幕的寬大于高，就設置為FIXED_HEIGHT，即高度固定，這適用于橫屏游戲。反之寬度固定，適用于豎屏游戲。

if not CONFIG_SCREEN_AUTOSCALE then
    if w > h then
        CONFIG_SCREEN_AUTOSCALE = "FIXED_HEIGHT"
    else
        CONFIG_SCREEN_AUTOSCALE = "FIXED_WIDTH"
    end
else
    CONFIG_SCREEN_AUTOSCALE = string.upper(CONFIG_SCREEN_AUTOSCALE)
end

FILL_ALL 保證了設計區域總有一個方向鋪滿屏幕，另一個方向可能超出屏幕或留有黑邊。在沒有觸摸事件的時候cc.bPlugin_為真，如果為真就使用NO_BORDER,按比例伸縮，大圖裁剪，小圖留黑邊。

 if CONFIG_SCREEN_AUTOSCALE == "FILL_ALL" then
        CONFIG_SCREEN_WIDTH = w
        CONFIG_SCREEN_HEIGHT = h
        scale = 1.0
        if cc.bPlugin_ then
            glview:setDesignResolutionSize(CONFIG_SCREEN_WIDTH, CONFIG_SCREEN_HEIGHT, cc.ResolutionPolicy.NO_BORDER)
        else
            glview:setDesignResolutionSize(CONFIG_SCREEN_WIDTH, CONFIG_SCREEN_HEIGHT, cc.ResolutionPolicy.FILL_ALL)
        end

如果為FIXED_WIDTH，就將X的縮放賦值給它，因為是寬度固定，高度適應，所以設計分辨率高度最終的值就是屏幕高度除以X的縮放值。FIXED_HEIGHT同理

 if not scaleX or not scaleY then
            scaleX, scaleY = w / CONFIG_SCREEN_WIDTH, h / CONFIG_SCREEN_HEIGHT
        end

        if CONFIG_SCREEN_AUTOSCALE == "FIXED_WIDTH" then
            scale = scaleX
            CONFIG_SCREEN_HEIGHT = h / scale
        elseif CONFIG_SCREEN_AUTOSCALE == "FIXED_HEIGHT" then
            scale = scaleY
            CONFIG_SCREEN_WIDTH = w / scale
        else
            scale = 1.0
            printError(string.format("display - invalid CONFIG_SCREEN_AUTOSCALE \"%s\"", CONFIG_SCREEN_AUTOSCALE))
        end
        glview:setDesignResolutionSize(CONFIG_SCREEN_WIDTH, CONFIG_SCREEN_HEIGHT, cc.ResolutionPolicy.NO_BORDER)

3 IphoneX適配方案

下面是display為我們提供的各種屬性，在引擎初始化的時候會計算好各種值，在游戲中可以用這些坐標值作為參考點來定位我們的內容

local x = display.right - 100 -- 圖片中心在屏幕右邊往左 100pt
local y = display.top   - 100 -- 圖片中心在屏幕頂部往下 100pt
local sprite = display.newSprite("Button.png") -- 創建 sprite 對象用于顯示圖片
sprite:setPosition(x, y) -- 設置這個 sprite 對象的坐標

X的最大的坑就是頭上的鐵劉海，所以我們需要做的就是以下兩點：

• 屏幕中心點往上偏移37個像素
• 屏幕高度減去鐵劉海的高度即95個像素
  所以界面實際是640x1291

display.size               = {width = winSize.width, height = (winSize.height - 95)}
display.cy                 = (display.height / 2) + 37

4 Ipad實際頁面計算

前提：豎屏游戲,Ipad的屏幕大小為768x1024，config.lua里的設計分辨率為640x960