1. 目标

项目 UI 模块基于 UGUI 来实现，希望能够适配不同分辨率的移动平台。项目总体是竖屏，所以希望能够在不同的竖屏分辨率上面，所有的 UI 元素都能够显示，可能会存在一张背景图，背景图可能并不要求全部显示出来。

2. Canvas Scaler

UGUI 的分辨率适配主要是通过 Canvas Scaler 的设置来实现的。我们只讨论 Canvas 的 RenderMode 为 Screen Space - Overlay 这种情形。因为Canvas 始终是覆盖整个屏幕空间，所以有一个确定的前提是，无论屏幕分辨率如何，对于Canvas 组件，都满足：

RectTransform.width * RectTransform.ScaleX = Screen.width;

RectTransform.height * RectTransform.ScaleY = Screen.height;

我们查看 Canvas 发现RectTransform 元素是只读的，"Some values driven by Canvas"，Canvas 是如何计算 width/height/scaleX/scaleY的呢？我们从 Canvas Scaler 的 UI Scale Mode 来看。

2.1 Constant Pixel Size

Canvas Scaler 的 UI Render Mode 设置为 Constant Pixel Size

这种模式下面，我们可以设值 Canvas.scaleFactor 的值，这个值直接影响 Canvas 的 scaleXYZ（事实上此时 scaleX == scaleY == Canvas.scaleFactor )，进而影响了 Canvas 的 width 和 height。可以对比下面两个 scaleFactor 值对结果的影响

Scale Factor 设置为1 Scale Factor 设置为2

固定的 Scale Factor ，当分辨率变大时：Canvas 的 ScaleXY 不变，width 和 height 变大，UI 元素的像素尺寸不变，但是Canvas 变大了，所以UI元素在屏幕中 "变小" 了。

反之，当分辨率变小时，UI 元素在屏幕中“变大”了。

2.2 Scale With Screen Size

Canvas Scaler 的 UI Scale Mode 设置为 Scale With Screen Size

这种模式下，不能直接设置 Scale Factor 了，而是提供了一个参考分辨率，通过设置 Screen Match Mode 进行适配。

MatchWidthOrHeight

参考分辨率为 600x600，设备实际分辨率为 180x180时，Canvas 的 ScaleXY 正好等于 180/600 为 0.3，此时是等比缩放。此时，matchWidthOrHeight 值的变化不会影响结果。

设备实际分辨率宽高比和参考分辨率宽高比不同时，matchWidthOrHeight 表示宽和高对于最终 Canvas 的 ScaleXY 以及 width/height 的影响程度。

当 matchWidthOrHeight 为 0时，保持 Canvas.width 为 Reference Resolution.x 不变，Canvas.scaleXY = Screen.width / Canvas.width, Canvas.height = Screen.height / Canvas.scaleXY;

当 matchWidthOrHeight 为 1 时，保持 Canvas.height 为 Reference Resolution.y 不变，Canvas.scaleXY = Screen.height / Canvas.height, Canvas.width = Screen.width / Canvas.scaleXY;

当 matchWidthOrHeight 取值(0,1)时，则是进行相关差值。

Expand

相当于设置 Canvas.scaleXY = min(Screen.width / ReferenceResolution.x, Screen.height / ReferenceResolution.y)；

Shrink

相当于设置 Canvas.scaleXY = max(Screen.width / ReferenceResolution.x, Screen.height / ReferenceResolution.y)；

2.3 Constant Physical Size

没太搞懂。通常也不会去用。

3. 最终确定的适配方案

最终确定的适配方案如下图：

最终确定的一个Canvas Scaler 设置

对于 Canvas 下的UI元素，为保证在不同分辨率下的适配，需要根据元素具体的位置，设置合理的 pivot 和 anchor 来保证在不同分辨率下都可以显示出来。比如：

对于左上角的元素，设置

左上角元素的设置

表示，将这个元素的左上角固定在Canvas的左上角，当Canvas 适配分辨率时，这个元素将始终被放在左上角，除非分辨率实在奇葩，否则基本可以保证元素被显示。

4. 番外：不同分辨率中的3d元素