原文地址 www.chuyouxiang.com
在使用 CocosCreator 引擎开发的过程中，如果需要做不同宽高比屏幕的适配或旋转，必定会接触到 designSize、visibleSize、frameSize 等不同属性，它们各代表什么意思？区别是什么？本文将解答这些问题，并总结这几个属性之间的推导公式。
1 简介
在使用 CocosCreator 引擎开发的过程中，如果需要做不同宽高比屏幕的适配或旋转，必定会接触到 designSize、visibleSize、frameSize 等不同属性，它们各代表什么意思？区别是什么？本文将解答这些问题，并总结这几个属性之间的推导公式。
2 定义
designSize
视图的设计分辨率。
运行中可通过以下代码获取：
const designSize = view.getDesignResolutionSize();
这是开发者自己在 CocosCreator 中设定的尺寸，代表一个固定的宽高比。
devicePixelRatio
设备或浏览器像素比例。
在运行中可通过以下代码获取：
const devicePixelRatio = view.getDevicePixelRatio();
它的值由设备硬件决定，代表一个逻辑点有几个像素，例如 iPhone7 设备上是 2。
frameSize
视图中边框尺寸。在 native 平台下，它返回全屏视图下屏幕的尺寸。在 web 平台下，它返回 canvas 元素的外层 DOM 元素尺寸。
在运行中可通过以下代码获取：
const frameSize = view.getFrameSize();
这是一个最重要的属性，因为之后的几个属性都可以根据它推导出来。在 H5 平台，它等同于canvas.clientWidth/clientHeight，在微信平台，它等同于window.screenWidth/screenHeight或window.innerWidth/innerHeight。
它的值也是由设备硬件决定，实际上等于 设备屏幕分辨率 / devicePixelRatio，例如：iPhone7 的屏幕分辨率是750x1334，则运行在 iPhone7 设备上的全屏游戏的 frameSize 是分辨率除以 2，即375x667。
canvasSize
视图中 canvas 的尺寸。在 native 平台下，它返回全屏视图下屏幕的尺寸。在 Web 平台下，它返回 canvas 元素尺寸。
在运行中可通过以下代码获取：
const canvasSize = view.getCanvasSize();
阅读引擎源码可知，它实际上等于 frameSize * devicePixelRatio；
scale
这是将画布像素分辨率放到设计分辨率的比例。
在运行中可通过以下代码获取：
const scaleX = view.getScaleX();
const scaleY = view.getScaleY();
一般适配都是等比缩放的，所以 scaleX 和 scaleY 相等，但它的值根据屏幕适配方式不同而不同。阅读引擎源码可知，当 FixedHeight 时，scale = canvasSize.height / design.height；当 FixedWidth 时，scale = canvasSize.width / design.width；
visibleSize
视图窗口可见区域尺寸。
在运行中可通过以下代码获取：
const visibleSize = view.getVisibleSize();
阅读引擎源码可知，它的值实际上等于 canvasSize / scale。这是一个在 UI 适配中使用频率很高的属性，例如，想让一个节点放到屏幕中央，通常可这样：
const vsize = view.getVisibleSize();
node.setPosition(vsize.width/2, vsize.height/2);
visibleSizeInPixel
视图窗口可见区域像素尺寸。
阅读引擎源码可知，它的值实际上等于 visibleSize * scale；
3 总结
devicePixelRatio、frameSize 由设备硬件决定，designSize 由开发者自定义，无论是哪种屏幕适配方式，根据以上 3 者，都可以推导出剩余的所有属性。
推导顺序如下：
(frameSize * devicePixelRatio) -> canvasSize -> scale -> visibleSize -> visibleSizePixel
最后，以 iPhone7 设备为例，它的屏幕分辨率是750x1334，假设开发者的设计分辨率为640x960，适配方式为FixedWidth，则各个属性值的总结如下：
属性 值 计算公式
designSize 640 x 960 开发者自定义
devicePixelRatio 2 硬件决定
frameSize 375 x 667 硬件决定，等同于window.screenWidth/screenHeight
canvasSize 750 x 1334 canvasSize = frameSize * devicePixelRatio
scale 1.17 scale = canvasSize.width / design.width
visibleSize 640 x 1138 visibleSize = canvasSize / scale
visibleSizeInPixel 750 x 1334 visibleSizeInPixel = visibleSize * scale
