unity webgl屏幕适配

### 实现Unity WebGL项目屏幕适配的方法

为了使Unity WebGL项目能够在各种分辨率下正常显示，确保UI元素按预期缩放并适应不同的宽高比至关重要。通过Canvas Scaler组件以及合理的Anchor设置能够有效解决这一问题。

#### 使用Canvas Scaler进行自适应调整

在Unity中创建或选中一个Canvas对象，在Inspector面板找到其下的`Canvas Scaler`组件。将Scale Mode设为`Scale With Screen Size`模式[^1]。这使得整个UI布局能依据当前设备的屏幕尺寸动态变化。具体参数如下：

- **Reference Resolution**: 设置参考分辨率为设计稿的实际大小，通常选择常见的比例如1920×1080。

- **Match**:
- 当值接近于0时（比如0.5），宽度优先匹配；此时高度可能会被拉伸/压缩来填充剩余空间。
- 反之则表示高度优先匹配，即宽度可能发生变化以满足设定的高度范围。

对于WebGL这类需要广泛兼容多种终端的应用场景而言，推荐采用较为宽松的比例关系，允许一定程度上的变形而非强制保持原始纵横比不变。

#### Anchor Points配置优化用户体验

针对具体的UI控件，合理利用矩形变换(Rect Transform)里的Anchors属性可以帮助构建响应式的用户界面。例如，如果希望按钮始终位于窗口底部中央，则应将其Min和Max anchors都指向Parent节点中心位置，并适当调节Pivot使其居中对齐。

另外值得注意的是，在处理滚动视图(Scroll View)内的内容时，考虑到性能因素，建议尽可能选用RectMask2D来进行遮罩操作而不是Mask，除非确实存在复杂的形状裁切需求[^4]。

// C#脚本用于辅助调试目的，实时更新Canvas Scale Factor
using UnityEngine;
using UnityEngine.UI;

public class CanvasScalerHelper : MonoBehaviour {
    private void Update() {
        float scaleFactor = GetDesiredScaleFactor();
        GetComponent<Canvas>().scaleFactor = Mathf.Lerp(GetComponent<Canvas>().scaleFactor, scaleFactor, Time.deltaTime * 2f);
    }

    private float GetDesiredScaleFactor(){
        Vector2 referenceResolution = new Vector2(1920, 1080); // 设定的标准分辨率
        Camera mainCamera = Camera.main;
        if (mainCamera != null){
            return Mathf.Min(Screen.width / referenceResolution.x, Screen.height / referenceResolution.y);
        }
        return 1f;    
    }
}