如何处理所有可用 iPhone 分辨率的图像比例？

Posted 2023-04-18

【中文标题】如何处理所有可用 iPhone 分辨率的图像比例？

【英文标题】：How to handle image scale on all the available iPhone resolutions?

【发布时间】：2014-11-16 03:37:06

【问题描述】：

如果我们想使用这个图像来覆盖屏幕的整个宽度和一半高度，那么最好使用什么尺寸的图像：background.png、[e-mail] 和 [e-mail] iPhone 肖像应用的所有分辨率？

这就是我们现在所拥有的：

Device                        Points   Log. Res.  Sc. Real Res.  PPI  Ratio   Size
iPhone 12 Pro Max, 13 Pro Max 926x428  2778x1284  3x  2778x1284  458  19.5:9  6.7"
iPhone 12, 12 Pro, 13, 13 Pro 844x390  2532x1170  3x  2532x1170  460  19.5:9  6.1"
iPhone 12 mini, 13 mini       812x375  2436x1125  3x  2340x1080  476  19.5:9  5.4"
iPhone XS Max, 11 Pro Max     896x414  2688x1242  3x  2688x1242  458  19.5:9  6.5"
iPhone XR, 11                 896x414  1792x828   2x  1792x828   326  19.5:9  6.1"
iPhone X, XS, 11 Pro          812x375  2436x1125  3x  2436x1125  458  19.5:9  5.8"
iPhone 6+, 6S+, 7+, 8+        736x414  2208x1242  3x  1920x1080  401  16:9    5.5"
iPhone 6, 6S, 7, 8, SE2       667x375  1334x750   2x  1334x750   326  16:9    4.7"
iPhone 5, 5S, 5C, SE1         568x320  1136x640   2x  1136x640   326  16:9    4.0"
iPhone 4, 4S                  480x320  960x640    2x  960x640    326  3:2     3.5"
iPhone 3GS                    480x320  480x320    1x  480x320    163  3:2     3.5"

有人说对于 iPhone 6 Plus 的边到边图像（如屏幕底部从左到右边缘的横幅），他们会准备宽度为 1242 的 [e-mail] 和 iPhone 6 back@2x .png 宽度为 750 以匹配 iPhone 6 屏幕尺寸，但我认为这不是一个好主意，因为 1242 / 3 = 414 和 750 / 2 = 375 所以将它们命名为 @2x 和 @3x 没有意义。然后 back.png - 375 或 414 应该有什么宽度？

图形名称使用@2x 和@3x 后缀，因此如果[e-mail] 的分辨率为30x30，那么从逻辑上来说[e-mail] 的分辨率应该是20x20，而image.png 的分辨率应该是10x10。这意味着如果我们想为每个屏幕创建清晰的全宽图像，那么我们可能应该创建宽度为 4143=1242px 的 [e-mail]，宽度为 4142=828px 的 [e-mail]和宽度为 414px 的 back.png。然而，这意味着在除 iPhone 6 Plus 之外的每台 iPhone 上，您都需要设置 uiimages 以使用例如宽高比匹配内容模式，并且它们将被缩小，因此这又不是一个完美的解决方案，并且可能真的会减慢应用程序的速度我们在旧设备上使用了大量缩放。

那么您认为解决这个问题的最佳解决方案是什么？

【问题讨论】：

iPhone 6 屏幕揭秘链接：bit.ly/1qHEBKk iPhone 分辨率终极指南链接：bit.ly/1paVXLd

iPhone 6 Plus 414 x 736 点 1242 x 2208 像素 3x 比例 1080 x 1920 物理像素 401 物理 ppi 5.5" iPhone 6 375 x 667 点 750 x 1334 像素 2x 比例 750 x 1334 物理像素 326 物理ppi 4.7" iPhone 5 320 x 568 点 640 x 1136 像素 2x 比例 640 x 1136 物理像素 326 物理 ppi 4.0"

iPhone 4 320 x 480 点 640 x 960 像素 2x 比例 640 x 960 物理像素 326 物理 ppi 3.5" iPhone 3GS 320 x 480 点 320 x 480 像素 1x 比例 320 x 480 物理像素 163 物理 ppi 3.5"

关注“***.com/questions/48483934/…”

【参考方案1】：

如果不使用，您不必将每张图片都设置为所有比例。只制作您需要的尺寸并根据它们的宽度命名。对于全设备宽度的纵向图像，您需要 1x 和 2x 宽度为 320px，2x 宽度为 375px，3x 宽度为 414px。

4" 设备使用 "-568h" 后缀来命名它们的启动图像，所以我建议使用类似的命名方案：

ImageName-320w (@1x & @2x) ImageName-375w (@2x) ImageName-414w (@3x)

然后弄清楚你在运行时需要什么图像：

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

如果将来添加其他宽度，这可能会中断，但到目前为止，Apple 一直需要重新构建应用程序以支持新的显示器，所以我想假设他们会继续这样做是有点安全的。

【讨论】：

这就是苹果没有推出 32 GB 版本的新 iphone 的原因之一。16 GB 版本作为测试设备，64 GB 版本用于使用。由于图形的原因，应用程序的大小将急剧增加。跨度>

@IlkerBaltaci 如果他们只让开发人员购买 16 GB 版本我会理解，但是这样会有很多人由于磁盘空间不足甚至无法升级他们的操作系统。

即使有 32 GB 也是如此，我不得不等待一周来清理并为 ios 8 腾出 5 GB 空间。

如何在IB中使用这些？

@FilipRadelic iPhone5 怎么样？宽度为 640，但高度不同于 iPhone 4 使用的高度

【参考方案2】：

我个人会做：

ImageName@2x iPhone 4/4s ImageName-568h@2x iPhone 5/5s ImageName-667h@2x iPhone 6 ImageName-736h@3x iPhone 6Plus

这背后的逻辑是它显示了所有设备之间的差异，而宽度在 iPhone 5s 和 iPhone 4s 上共享相同的值

编辑：

这只是我用于依赖于设备的资源的命名约定，例如占据整个屏幕的背景图像，大多数时候你想要的只是：

ImageName@2x iPhone 4/4s/5/5s/6 ImageName@3x iPhone 6Plus/缩放模式

【讨论】：

iPhone 6 plus 的“缩放模式”怎么样？难道我们不应该也提供一个 ImageName-667h@3x 吗？

@thewormsterror 我认为您的图像命名约定的最后一个已磨损

@thewormsterror 很好的答案，您还可以添加 ipad 图像的命名方式。

如果来自 api 的图像是 1024 x 768，是否意味着我可以使用的最大尺寸是 256@3x？

【参考方案3】：

对于@2x 和@3x 的讨论，您不必真正关心这些。关心屏幕的点大小，并确保有两倍点大小的@2x 资源和点大小三倍的@3x 资源（以像素为单位）。设备会自动选择正确的。不过看了你的帖子我猜你已经知道了。

对于边缘到边缘的图像，不幸的是，您必须使其适用于所有屏幕分辨率。因此，对于纵向 iPhone，它将是 320 点、375 点和 414 点，其中 414 点必须是 @3x。更好的解决方案可能是通过在界面构建器中设置切片来使您的图像可扩展（如果您使用图像目录，那就是）。但是，根据图像，这可能是也可能不是一个选项，具体取决于图像是否具有可重复或可拉伸的部分。像这样设置的可缩放图像对性能影响很小。

【讨论】：

我需要用 uicollectionviewcell 内的图像来调整屏幕宽度（显然在适合所有屏幕的 uicollectionview 内）。对于 iphone 6 plus，我解决了 3x a (414x3=1242 px)，2x 我必须使用哪个尺寸？它必须适合 iphone4s/5/5s 和 6 屏幕...

我有一个大小为 222px x 260px 的图标，看起来非常适合 iPhone5/5s 屏幕。现在在使应用程序与 iPhone6 和 6plus 屏幕兼容时 1）该图标的大小应该是多少？根据三次规则，它应该是 333px x 390px 吗？ 2) 我是否需要对 xib 中的图像应用任何自动调整大小？

@jerrygdm，我的​​情况几乎和你一样。你在一天结束的时候做了什么？可以和我分享一下吗？

@Ans，你有没有为 iphone6 和 iphone6Plus 使用过 3x 图标。

@Jitesh 我也在问同样的问题......我应该制作多大的 x3x 图标？我想添加，但大小应该是多少......这是我的问题..

【参考方案4】：

@2 和@3 不是真正的图像缩放，而只是表示有多少真实像素代表屏幕上的一个虚拟像素，某种来自 android 世界的 hdpi/xhdpi/xxhdpi/blabla。它只向系统显示某些设备屏幕应该使用什么图像。

因此，如果您需要使用整个屏幕图像 - 请根据实际屏幕尺寸进行准备。

【参考方案5】：

根据图形，在某些情况下，当我们仅使用单个图像时，它可能会正常工作，例如大小为 414 点宽 x 100 点高（最大可能宽度和一些固定高度）的横幅并将其放在 UIImageView 中固定在屏幕的左右边缘，具有固定高度 100 并为该 UIImageView 设置宽高比填充模式。然后在较小的设备上，图像的左侧和右侧将被剪切，我们将只看到图像的中心部分。

【参考方案6】：

我为此创建了类别：

+ (UIImage *)sizedImageWithName:(NSString *)name 
    UIImage *image;
    if (IS_IPHONE_5) 
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
        if (!image) 
            image = [UIImage imageNamed:name];
        
    
    else if (IS_IPHONE_6) 
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
    
    else 
        image = [UIImage imageNamed:name];
    
    return image;

您可以在此处获取完整代码：https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

【参考方案7】：

我认为边缘到边缘或全屏图像的最佳解决方案是关心以像素为单位的真实屏幕尺寸（而不是点），并且您必须在运行时检查设备的型号并选择合适的图像，即：

image-iphone4-4s.png (640x960/2) for 1/2 screen height, image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height, image-iphone6-6s.png (750x1334/2) for 1/2 screen height, image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height,

在提问者的这种情况下不需要@?x。

【参考方案8】：

我认为我们应该为不同的设备使用不同大小的背景图片。只需使用@3x 缩放图像作为背景。

您可以使用以下行检测设备。

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)