如何在所有可用的iPhone分辨率上处理图像比例？ [英] How to handle image scale on all the available iPhone resolutions?
问题描述
最适合图像的尺寸有：background.png，background @ 2x.png和background@3x.png如果我们想要使用此图像来覆盖屏幕的全宽和半高所有iPhone肖像应用的解决方案？
What sizes would be the best to use for images: background.png, background@2x.png and background@3x.png if we want to use this image for example to cover the full width and half height of the screen on all resolutions for iPhone portrait app?
这就是我们现在所拥有的：
This is what we have now:
Device Points Pixels Scale Physical Pixels Physical PPI Size
iPhone X 812x375 2436x1125 3x 2436x1125 458 5.8"
iPhone 6 Plus 736x414 2208x1242 3x 1920x1080 401 5.5"
iPhone 6 667x375 1334x750 2x 1334x750 326 4.7"
iPhone 5 568x320 1136x640 2x 1136x640 326 4.0"
iPhone 4 480x320 960x640 2x 960x640 326 3.5"
iPhone 3GS 480x320 480x320 1x 480x320 163 3.5"
有人说iPhone 6 Plus的边缘到边缘图像（如屏幕左下边缘的横幅）准备宽度为1242的back@3x.png和宽度为750的iPhone 6 back@2x.png，以匹配iPhone 6的屏幕尺寸，但我认为这不是一个好主意，因为1242/3 = 414和750/2 = 375所以将它们命名为@ 2x和@ 3x没有意义。那么什么宽度应该有back.png - 375或414？
Some people say that for edge to edge image (like a banner on the bottom from left to right edge of the screen) for iPhone 6 Plus they would prepare back@3x.png with width 1242 and for iPhone 6 back@2x.png with width 750 to match the iPhone 6 screen size however I do not think that this is a good idea because 1242 / 3 = 414 and 750 / 2 = 375 so naming them as @2x and @3x does not have sense. And then what width should have back.png - 375 or 414?
图形名称使用@ 2x和@ 3x后缀，所以如果例如image@3x.png有30x30从逻辑上思考image@2x.png的分辨率应该是20x20分辨率，image.png应该是10x10。这意味着如果我们想要为每个屏幕设置清晰的全宽图像，那么我们可能应该创建back@3x.png，宽度为414 * 3 = 1242px，back @ 2x.png，宽度为414 * 2 = 828px，back.png为宽度414px。然而，这意味着除了iPhone 6 Plus之外的每一部iPhone都需要设置你的uiimages以便使用例如适合内容的内容模式，它们将被缩减，所以这又不是一个完整的解决方案，如果可能真的会减慢应用程序的速度我们在较旧的设备上使用大量的scalling。
Graphics names are using @2x and @3x suffixes so if for example image@3x.png has 30x30 resolution then logically thinking image@2x.png should have 20x20 resolution and image.png should be 10x10. This means that if we want to have sharp full width image for each screen then we probably should create back@3x.png with width 414*3=1242px, back@2x.png with width 414*2=828px and back.png with width 414px. This however means that on every iPhone except for iPhone 6 Plus you will need to setup your uiimages to use for example aspect fit content mode and they will be scalled down so this again is not a perferct solution and probably would really slow down the application if we use a lot of scalling on older devices.
那么你认为什么是解决这个问题的最佳解决方案？
So what do you think would be the best solution to solve this problem?
推荐答案
如果不使用每个图像，则不必拥有所有图像。只制作您需要的尺寸，并根据宽度命名。对于纵向全设备宽度图像，您需要320x宽1x和2x，375px宽2x和414px宽3x。
You don't have to have each image in all scales if it won't be used. Make only the sizes you need and name them according to their width. For portrait full-device-width images, you need 320px wide at 1x and 2x, 375px wide at 2x and 414px wide at 3x.
4设备使用-568h 用于命名其发布图像的后缀，因此我建议使用类似的命名方案：
4" devices used "-568h" suffix for naming their launch images, so I'd recommend a similar naming scheme:
- ImageName-320w（@ 1x& @ 2x ）
- ImageName-375w（@ 2x）
- ImageName-414w（@ 3x）
然后找出运行时需要的图像：
Then figure out what image you need at runtime:
NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];
如果将来添加其他宽度，这可能会中断，但到目前为止Apple一直需要重建应用程序支持新显示，所以我猜他们会继续这样做是有点安全的。
This might break if other widths are added in future, but so far Apple has always required rebuilding the app to support new displays so I guess it's somewhat safe to assume they will continue doing that.
这篇关于如何在所有可用的iPhone分辨率上处理图像比例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
