Correct Image and Font Scale on different Devices?

Question

I have a simple view with a text and an Image. I ran this app on iPhone6Plus and iPhone5. Then I made a screenshot of both and enlarged the iPhone5 screenshot such that it matches the size of the screenshot from iPhone6Plus. Here is the result:

As you can se the size of the text the size of the image and there positions are not identical but they should be to look the same on different screen sized.

Here is an example of a weather app running on different screens:

As you can see the sizes and the positions of text and image are identical.

The image is loaded from asset catalog:

imageView.image = UIImage(named: "shower3")
self.view.addSubView(imageView)
imageView.center = self.view.center

I have only created a 128x128 image and put it into the @1x version in the asset cataloge.

Let me rephrase this. I run the wether app on iPhone5 make ascreenshot and iPhone6 make a screenshot. Then I resize both screenshots to the same size. Then I see that both fontsize as well as images dimension are exactly equal on both screenshots. This means that on each device font and image must have different dimensions. How can I do that?

How can I achieve that text and image have identical proportions on different screen sizes? How does the Weather App do it?

Answer 1

Images

I am the creator and one of the developers of the Swift Weather app. The app doesn't use three versions of images because I didn't make those images and it was a Pull Request from another developer. I don't have the origin images.

As @Daniil Korotin mentioned, iOS uses points to calculate image and font sizes. iOS uses let screenScale = UIScreen.mainScreen().scale to retrieve the screen scale and pick up the proper size (1x, 2x or 3x) of the image. If we don't provide the proper size of the image, for example, in SwiftWeather app, we have only 1x version of the image (as the screenshot below), iOS will upscale the image to render on retina devices. On iPhone 6 Plus, it actually does downsampling for 3x assets. Please have a look at iPhone 6 Screens Demystified. In some case, if you don't provide 2x or 3x images, on retina devices, the image upscaled from 1x may looks blurry. We should always provide 1x, 2x and 3x images if possible.

Fonts

iOS renders fonts according to the specified points. It will automatically convert the points to certain pixel based on the devices' screen scale (as mentioned above).

How can I achieve that text and image have identical proportions on different screen sizes? How does the Weather App do it? The answer is Auto Layout

You can see we set constraints for the image view (used for the weather icon) as below. The width and height are always 150 points, please notice it is points nor pixels. It will render the same size (for look and feel, not for exactly pixels) for different devices. For your first image (iPhone 6 Plus vs. iPhone 5), it looks different because maybe your simulators have different scale. A better way to check how auto layout elements lay on the screen is to use Preview in Interface Builder.

Open the main storyboard, and click on Assistant Editor. On the right hand side, select Preview (on the top left). And click the plus sign ( on the bottom left) to add different devices. You can see they are identical proportions on different screen sizes.

If you have any questions, please let me know.

Something maybe off topic

If I design the images/assets, I would like to use some vector base tool like Sketch to design the assets and export them to three different sizes. Please have a look my another project iOSAnimationSample. It has a Sketch file for the design.

Sketch design

Export assets to different sizes

In that case, iOS can pick up the proper assets for different devices.

Answer 2

The app you are referring to does not correctly support multiple screen sizes. The interface is scaled up to run on the 6 and 6 plus, which is why everything appears the same size.

Look at the screenshots from your app - the status bar is much smaller on the 6 plus. This is because it is supposed to take up less room on the screen. It's 20 points high on all devices.

Now look at the screenshot from the weather app - the status bars are the same size. Because the weather app does not support multiple screen sizes, iOS simply takes the smaller interface and scales it up to fill the screen.

If you want to achieve the same effect (which you shouldn't) then remove the LaunchScreen.xib file and use a launch image instead. But people don't buy larger phoned screens because they want to have the same content, but bigger. That would be achieved more cheaply by simply holding the phone closer to one's face.

You're supposed to take advantage of larger displays by allowing more content to be shown at once on the screen - more rows of data in a table, more text from a book, more images from a photo library.

In the case of a weather app the extra space should be used to display more rows of an hourly forecast or something, not just a larger version of a fairly useless icon depicting the type of weather.

I suspect it is only game support that means supporting larger screens properly is not already a requirement for app store submission. Supporting the 4 inch screen became mandatory quite quickly, you should expect a similar rule to be introduced for the 6 and 6 plus before too long.

If you want a specific element to always take up 50% of the width of the screen, or a label to always be the same size as an image, then you use autolayout constraints with multipliers. An autolayout constraint is of the basic structure:

attribute of A = (attribute of B * multiplier) + constant

Most of the time the multiplier is left as one, so you're just saying that this is 20 points to the left of that, or whatever, but you can use the multiplier as well, and say that A is the width of B, multiplied by 2 or 0.5 or whatever you like.