Unity中无需重写代码修改分辨率/宽高比的方法咨询

一、16:9宽高比与固定分辨率的优劣势对比 #

16:9宽高比方案 #

• 优势：适配绝大多数现代显示设备（电脑、手机、平板主流比例均为16:9或近似），无黑边/拉伸变形问题；开发时只需维护比例逻辑，不用纠结具体像素值。
• 劣势：对像素精度要求高的场景（如复古像素游戏、固定像素尺寸UI），比例适配会导致元素尺寸随屏幕变化，破坏设计精度。

固定分辨率方案（如1920x1080） #

• 优势：布局逻辑简单，所有元素定位、尺寸基于固定像素值，前期开发无需考虑适配；适合像素精度要求高的项目。
• 劣势：非目标分辨率设备上会出现黑边或强制拉伸，用户体验差。

二、固定分辨率下的无代码重写适配方案 #

若选择固定分辨率，想要后期修改时无需重写定位/缩放代码，核心是用相对逻辑代替绝对像素值，配合Canvas缩放机制：

1. 布局改用相对比例定义 #

将所有元素的定位、尺寸从绝对像素（如x: 100, y: 200, width: 50）改为基于目标分辨率的比例值：

• 以1920x1080为例，原x=100转为xRatio = 100/1920，y=200转为yRatio = 200/1080，width=50转为widthRatio = 50/1920。
• 渲染时根据当前Canvas实际尺寸计算真实值：actualX = canvasWidth * xRatio，actualWidth = canvasWidth * widthRatio。

后期修改目标分辨率时，仅需更新基准分辨率数值，所有元素自动适配，无需逐个调整定位代码。

2. Canvas自动缩放适配屏幕 #

通过CSS缩放固定分辨率的Canvas，使其适配屏幕同时保持比例，示例代码：

// 目标固定分辨率
const targetWidth = 1920;
const targetHeight = 1080;
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;
  // 取宽高中较小的缩放比例，避免内容超出屏幕
  const scale = Math.min(screenWidth / targetWidth, screenHeight / targetHeight);
  
  // 设置Canvas显示尺寸（CSS）
  canvas.style.width = `${targetWidth * scale}px`;
  canvas.style.height = `${targetHeight * scale}px`;
  // 保持Canvas实际像素尺寸为固定分辨率，防止模糊
  canvas.width = targetWidth;
  canvas.height = targetHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

修改分辨率时仅需调整targetWidth和targetHeight，元素定位代码完全不用改。

3. 最优适配方案：归一化坐标系 #

彻底脱离具体分辨率/比例的方案，将Canvas坐标系映射为0-1的归一化范围：

• 左上角为(0,0)，右下角为(1,1)，所有元素定位、尺寸用0-1区间的数值定义（如位置(0.2, 0.3)，宽度0.1）。
• 渲染时转换为像素值：actualX = canvasWidth * 0.2，actualWidth = canvasWidth * 0.1。

无论后期修改分辨率还是宽高比，元素相对位置和大小始终一致，无需改动任何布局代码。

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