iOS Retina 螢幕圖片縮放機制解析：為什麼尺寸不變但 scale 變了

在 iOS 開發中測試 Retina 螢幕適配時，常見困惑：載入 @2x 圖片後，UIImage.size 返回的邏輯尺寸（points）與非 Retina 圖片相同，只有 scale 屬性變為 2.0。這其實是 Apple 設計的核心機制。

測試代碼與現象

UIImage *myImage = [UIImage imageNamed:@"image1.png"]; 
// 自動載入 image1@2x.png (若在 Retina 設備)

CGFloat imageWidth = myImage.size.width;   // 320
CGFloat imageHeight = myImage.size.height; // 57
NSLog(@"image %f %f", imageWidth, imageHeight);

CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;  // 320
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height; // 568
NSLog(@"screen %f %f", screenWidth, screenHeight);

// 關鍵屬性
NSLog(@"scale %f", myImage.scale); // Retina 設備輸出 2.0

核心概念解析

Points vs Pixels（點 vs 像素）

• Points (pt)：邏輯座標系統單位，所有佈局、尺寸 API 使用
• Pixels (px)：物理螢幕像素
• 關係：Pixels = Points × Scale

UIImage 的三個關鍵屬性

// 邏輯尺寸（Points）- 佈局計算使用
@property (readonly) CGSize size;       // 如 320x57

// 縮放比例 - 渲染時使用
@property (readonly) CGFloat scale;     // 1.0 (標準) / 2.0 (Retina) / 3.0 (Plus 系列)

// 物理像素尺寸 - 實際圖檔像素
// 計算方式：size.width * scale, size.height * scale
// 如：320 * 2.0 = 640px, 57 * 2.0 = 114px

為什麼這樣設計？

1. 程式碼通用性：同一套佈局代碼在標準/Retina 螢幕無需修改
2. 座標系統統一：CGRect、CGPoint、CGSize 都用 Points
3. 自動選圖：imageNamed: 根據螢幕 scale 自動載入 @2x/@3x 圖片

實際開發建議

• 佈局代碼永遠使用 Points（size、frame、bounds）
• 提供 @1x、@2x、@3x 三套圖片資源
• 需獲取物理像素時：pixelWidth = image.size.width * image.scale
• 繪圖上下文 (UIGraphicsBeginImageContextWithOptions) 設置正確 scale

驗證 Retina 生效的正確方法

// 檢查 scale 屬性
if (myImage.scale >= 2.0) {
    NSLog(@"Retina 圖片已載入");
}

// 或檢查螢幕 scale
CGFloat screenScale = [UIScreen mainScreen].scale;
NSLog(@"螢幕 scale: %f", screenScale); // 2.0 或 3.0