如何修复Unity项目构建为WebGL后transform position发生偏移的问题

核心适配配置修复 #

• 确认根Canvas的Canvas Scaler组件配置：
  • UI缩放模式选择Scale With Screen Size，禁用Constant Pixel Size模式
  • 参考分辨率设置为编辑器开发时Game视图的固定分辨率，例如1920*1080
  • 屏幕匹配模式选择Match Width Or Height，横屏项目将Match值设为1（匹配宽度），竖屏项目设为0（匹配高度）
• 检查偏移的灰色图片的锚点设置：
  将锚点对齐到元素的实际停靠区域，例如固定在左侧的元素锚点对齐到左边缘，固定居中的元素锚点对齐到画布中心，不要使用单点锚点依赖绝对像素定位。

构建配置修正 #

• 打开Player Settings > Resolution and Presentation，确认WebGL默认屏幕宽高和你设置的参考分辨率一致
• 关闭不必要的自适应拉伸选项，避免浏览器窗口分辨率和画布分辨率不匹配时强制缩放导致坐标偏移。

WebGL平台专属修复 #

• 删除所有调用Screen.SetResolution的代码，WebGL下该API的执行逻辑和编辑器存在差异，容易打乱UI坐标计算
• 构建前删除旧的Build输出文件夹和Library目录下的WebGL缓存文件，避免旧构建残留导致异常
• 可升级到Unity 2020.3系列最新LTS小版本，2020.3.18存在已知的WebGL UI坐标计算bug，后续版本已完成修复。

内容的提问来源于stack exchange，提问作者Adi_Hsiao_0410