How do I make text labels scale the font size with different Apple product screens?

Question

This is for ios dev with swift. I have a very simplistic layout:

link1 (not enough rep to actually post the pic)

All I'm trying to do is make sure that "results" label scales to roughly the same proportion for each different screen size. As you can see below, the difference is extremely noticeable between a 3.5 screen and an iPad screen:

link2

So I want to make the label on the iPad screen big enough to take up the same percentage of space as it does on the 3.5 screen, both vertically and horizontally. How do I go about doing this? I've been through several other tutorials/solutions, but they all teach you something different like how to change the label size, but not the font size. I tried adding the aspect ratio constraint, but that only shifts it around without changing the font size. Adding a height/width constraint also only changes the label size without the font size.

Detect width of screen then set the font manually. [http://stackoverflow.com/questions/25780283/ios-how-to-detect-iphone-6-plus-iphone-6-iphone-5-by-macro](http://stackoverflow.com/questions/25780283/ios-how-to-detect-iphone-6-plus-iphone-6-iphone-5-by-macro) — Tim007, Feb 26 '16 at 05:52
Check below link:- https://stackoverflow.com/a/53496831/5857254 Hope it helps :) — Pratyush Pratik, Nov 27 '18 at 13:33

score 6 · Answer 1 · edited Jun 29 '17 at 09:22

Hien,

Here is a super post about detecting the device/screen size.

How to detect iPhone 5 (widescreen devices)?

This is my favourite suggestion on it, please click on it and thank the real author!

Add a 'New Swift File'-> AppDelegateEx.swift

add an extension to AppDelegate

import UIKit
extension AppDelegate {
    class func isIPhone5 () -> Bool{
         return max(UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height) == 568.0
    }
    class func isIPhone6 () -> Bool {
        return max(UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height) == 667.0
    }
    class func isIPhone6Plus () -> Bool {
        return max(UIScreen.mainScreen().bounds.width,     UIScreen.mainScreen().bounds.height) == 736.0
    }  
}

usage:

if AppDelegate.isIPhone5() {
    collectionViewTopConstraint.constant = 2
}else if AppDelegate.isIPhone6() {
    collectionViewTopConstraint.constant = 20
}

Combine it with setting the font in your application, which you surely must be doing right now?

variable.font = UIFont(name: "Palatino", size: 24)

Through code its indeed possible. Do you have any way for doing it via Storyboard? — Ishika, Sep 19 '17 at 05:30

score 5 · Accepted Answer · edited May 23 '17 at 12:18

5

You can actually do it in your Storyboard.

1, open File Inspector tab(First tab) on your storyboard, set both Use auto layout and Use size classes check.

2, Then you can go to your label attribute(Forth tab), you will notice that there is a "+" beside, click it to add.

3, Choose the screen size u want like, can refer "Adaptivity and Layout" and then select your font size.

Answer refer to THIS LINK, you can also take a look

edited May 23 '17 at 12:18

Community

1
1

answered Feb 26 '16 at 05:56

Lee

850
11
23

1

Thanks! This is the solution I liked best because I'd generally prefer to avoid having to use code for autolayout stuff if possible. That just makes it easier to do, and it makes it so that when I preview the Storyboard I know that what I see is exactly what I'm going to get. Only problem I'm still having is that this really only allows me to distinguish between iPad and iPhone. The iPhone sizes despite being different only come in the same compact/regular sizes, so I can't differentiate the text size between iPhone models. – Hien Feb 26 '16 at 17:19
1

I am also facing the same issue with differentiate the text size between iPhone models. I know it will be done if we do programatically. But want to know with using the storyboard. – Ganesh May 17 '17 at 09:54
@Ganesh.. yes it is inside storyboard, where you can set different font size based on device width. – Lee May 19 '17 at 01:13
@Lee : How through storyboard? – Ishika Sep 19 '17 at 05:31
@Ishika the answer above is setting through storyboard. – Lee Sep 20 '17 at 07:47
@Lee : the above code is for size classes..but what for different iPhones itself...say 5, 6, 7 – Ishika Sep 20 '17 at 08:23
@Ishika, I did not tried that before because it is very troublesome. Size class work well for me. As I didn't set their fixed width and height, so it fit for every IPhone screen, much flexible. – Lee Sep 20 '17 at 09:23

How do I make text labels scale the font size with different Apple product screens?

2 Answers2

Linked