我有这张名为 image.png 的图片 - 我已经创建了 3 种不同尺寸的图片。
我不明白的是，为什么@2x 的宽度是 668px，而 iPhone 5&5S 只有 640px 宽？
我使用 iPhone 6+ 的屏幕尺寸设计了@3x。
谁能解释一下？
【问题讨论】：
标签： ios objective-c iphone xcode
让我解释一下iPhone屏幕之间的区别，这样你就会明白这些@?x后缀的必要性。
第一部 iPhone 和之后的两部（3G 和 3GS）具有尺寸为w:320, h:480 的标准显示屏。随着 iPhone 4 的推出，Apple 还推出了所谓的 Retina 显示屏，它将 4 个物理像素“打包”在 1 个逻辑像素（也称为“点”）中，即：
现在，即使 iPhone 4 的像素尺寸为 w:640, h:960（和 iPhone 5/5C/5S w:640, h:1136），您的屏幕尺寸仍然为 w:320, h:480 点（分别为 5/5C 的 w:320, h:568 /5 秒）。但是由于显示器的坐标系使用的是点而不是像素，所以所有 UI 元素的尺寸和以点为单位的位置对于每个设备都保持相同。
现在，点和像素之间的比率称为“比例”。 UIScreen、UIView、UIImage 和 CALayer 类有一个名为scale 的属性，当您加载带有前缀@2x 的图像时，比例将为2.0，并且显示将适合图像的2x2 位图像素点。 iPhone 6+ 使用 @3x 后缀，因为 Retina HD 显示屏具有缩放因子 3，然后图像从渲染的 2208 × 1242 像素缩小到 1920 × 1080 像素（屏幕上的点）。
缩小比例为 1920 / 2208 = 1080 / 1242 = 20 / 23。 意味着原始渲染中的每 23 个像素必须映射到 20 物理像素。换句话说，图像被缩小到 大约是其原始大小的 87%。
(source).
例如，如果您想在黑色正方形中生成绿色圆圈的图像，尺寸为w:100, h:100，则需要另外两张图像：一张尺寸为w:200, h:200，另一张尺寸为w:300, h:300，因为系统会缩放他们根据后缀。
这里有一些东西要阅读（如果我没有解释正确或容易理解的话）。我的建议：查看上面的链接和 Apple 官方文档以获取更多信息：
【讨论】：
100x100 pixels，则@2x 版本应为200x200，@3x 应为300x300。以下是缩放1.0 和2.0 的示例：CLICK HERE 查看示例。视网膜显示屏上的左圆圈是 100x100：它很模糊，看起来不清晰。右边是 200x200 并缩放到所需的 100x100 像素。您会看到不同之处：右边的看起来与原版一模一样，但尺寸是原版的两倍。
@3x 的图像将在显示屏上占据 100x100 点。带有 200x200 和后缀 @2x 的图像将在显示屏上占用 100x100 点。 100x100 且无后缀的图像将在显示屏上占用 100x100 点。
@2x 用于视网膜显示，如 iphone 4, 4s, 5, 5s, 6, ipads .... 该图像的宽度为 668 像素，我认为它用于可能具有额外视图区域的视图，例如水平滚动视图、教程页面或 ipad ......或类似的东西.. 是的，视网膜显示屏的宽度是正确的，它只有 640 像素。 希望这可能会有所帮助。
【讨论】：