Work with device sizes

Are you excited about the iPhone X? With it’s almost edge-to-edge OLED display, glass casing and… did I mention the screen? Anyway, people are eager to get there hands on this new device. As iOS app developers, we see things a little differently.

New screen size == more work

This problem has been well-known in the Android development community for some time. But with the introduction of the iPad Pro and now the iPhone X that brings the total screen size count to 7 that can run iOS 10 and above (4 phones, 3 iPads); add another one the app supports iOS 9 or lower (iPhone 4). To deal with this we usually just adjust spacing or set it up to be flexible with the different size devices. An example of this is that my phone apps are designed for phones, but if you run them on an iPad Pro, they’ll look wacky.

When updating my phone apps, I discovered that iOS 11 not only added the iPhone X size, but introduced some design-breaking changes as well. I spend some time reading up on it and found ways to redesign things from scratch. But being pressed for time, I wanted a quick fix. Agile development to the rescue!

The stories:

(not worried about iPad for now)

  • As a user, the app should look almost exactly the same on my new device
  • If my friend is stilll using an older OS, the design shouldn’t have changed
  • As a developer, I want to avoid building the app from the ground up

Ok, not too difficult. So what does that look like in regards to work (same order as above):

  • Make changes on iOS11 and iPhone X that maintain the look
  • Use an if statement to maintain the old design parameters
  • A few lines of code or storyboard adjustments

tl;dr

Here’s a very simple version of what I did

I wrapped this in a function and called it in viewDidLoad. So, what is it doing?
First it checks whether the device is running iOS 11 or above, if not, I keep the parameters the same.

If it is running iOS 11 changing the parameters may not have the correct effect on iPhone X, so I then check the device using this extension on UIDevice which I found on StackOverflow.

Btw, testing without an iPhone X was an issue. To solve that, I just changed the type check to .simulator when using the iPhone X simulator. It works fine…for now.

It was a quick fix and most of the time spend was just fine tuning positions. I hope this helps anyone in the same position as me.

Take care!