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 match

Answer 1

You need to set Layout constraint to all the views to make them look at same places and sizes in all screens sizes provided that the aspect ratio of screens are same.

Answer 2

iOS uses points to calculate image and font sizes. On non-retina screen 1 point equals 1 pixel, on retina screens — 2 pixels, and for iPhone 6 Plus it is equal to 3 pixels (some downscaling is applied, though). If you want to scale the image and font based on the actual pixel size of the screen, you can get the number of pixel per point like this:

CGFloat screenScale = [[UIScreen mainScreen] scale];

The iPhone 5, 6 and 6 Plus screen aspect ratios are the same, while resolutions differ. If you want to simply keep proportions, then you have to pick a 'base' screen width or height (say, the iPhone 5 screen width, which is 320.0 points) and then calculate the proportion by dividing the actual device screen width (say, iPhone 6 Plus screen width, which is 414.0 points) by that 'base' width (414.0 / 320.0 = 1.29375). You can get the screen size like this:

CGRect screenBounds = [[UIScreen mainScreen] bounds];

Dividing screenBounds's width by base width gives you the proportion. Then you just multiply all the sizes and margins with that proportion (1.29375 in our case for iPhone 6 Plus). Hope you get the idea.

P.S. A good guide to resolutions is here.

P.P.S. And in your case, as skorolkov mentioned below, the app just upscales everything for bigger screens (add/remove splash screens to enable/disable this upscaling).

UPD: Ok, now I see what confuses you. Here's the thing: when Apple initially released iPhone 6 and 6 Plus many apps didn't support their larger screens and bigger resolutions. So they decided that if an app lacks splash screens specifically made for those phones, it should use the iPhone 5 resolution.

That's why you get the exact same pictures after manually resizing screenshots: the system does that too. It simply takes iPhone 5 'picture' and stretches it so that it fits larger screens. The drawback is clear (and visible, especially on iPhone 6 Plus): the fonts and images are blurry and upscaled (system interface elements, like status bar, get upscaled too). So basically you get the iPhone 5 picture on all larger-screened devices (you can check that by taking a screenshot on an iPhone 5, resizing it manually to fit iPhone 6/6 Plus resolution and comparing the actual iPhone 6/6 Plus screenshot to it).

To be clear: that's the behavior you currently get, but it's not good. To keep everything properly scaled using the devices' native resolution, use the method I described above (manual multiplication) or autolayouts with equal height/width set to desired ratios for interface elements.

Answer 3

Weather App is using upscale mode to run on iPhone 6+. You can enable it by removing launch screens for 6/6+.

Go to asset catalog, select your launch image and unset 'iOS 8 or Later' checkbox in Attributes Inspector.

Screenshot - your app has this set

Screenshot from WeatherApp

Answer 4

in programatically (X and Y) we pre define the values in constant :

#define XScale [[UIScreen mainScreen] bounds].size.width / 320.0f
#define YScale [[UIScreen mainScreen] bounds].size.height / 568.0f

Then create UIImageView programatically

var imageView : UIImageView
imageView  = UIImageView(frame:CGRectMake(XScale *someValue, YScale * someValue, XScale *someValue, YScale *someValue));
imageView.image = UIImage(named:"image.jpg")
self.view.addSubview(imageView)

based on your screen size we need to set Constant values. We use for iPhone5 and 4s screen.

Answer 5

Have you tried to remove autoResizingfunctionality from view? Click on inner arrow to remove autoResize view as per superview

Answer 6

1. First turn off auto layout, auto resizing and size classes in storyboard.
2. Click on Images.xcassets icon and select all your graphics. In attribute inspector set Devices property to "Device Specific" and set the checkbox checked against "iPhone" and "Retina 4-inch"
3. Place all your graphics in 2x image set. You may place a higher resolution image set for better results with iPhone 6/6+.
4. Design your view for a reference device say iPhone 5 (320x568 portrait).
5. In your viewDidLoad method paste the following code

self.view.transform=CGAffineTransformScale(CGAffineTransformIdentity,self.view.frame.size.width/320, self.view.frame.size.height/568);

And you will have same result on iPhone 5/5s, iPhone 6/6+.