Here’s a bit of useful advice for debugging what’s going on with different screen sizes when you’re laying out your interface in Interface Builder.
First, select your Main.storyboard in the project navigator.
In the top bar of Xcode you have 6 buttons to the far right. The first one from the left is likely blue and looks like an alignment button. The second one from the right, the Assistant Editor, is the one you want when doing this, it looks like a Venn-diagram or two circles that intersect. Press it.
Now you have a split view with your Main.storyboard on the left side and most likely your ViewController to the right. In the navigation bar of the right split screen window, to the far left, you have a button that looks like four connected boxes. Press it, and from the menu that shows up, find your Main.storyboard file and select it. You will now have two windows showing your storyboard.
Now press the button with the squares again, this time it will show contextually different content. Navigate down to
“Preview (1)” and select the only option available in that menu.
The view on the right side will now change to show only the iPhone 7 or iPhone 7 Plus view. You also get a bar on the bottom of the screen with a Plus-sign in it. If you press it you can now add additional Devices that will show up on the screen at the same time.
So go ahead and add for example iPhone 7 Plus, iPhone 7 and iPhone SE, even multiple rotations if you need to, to be able to see in real time as you change your constraints on the left side, how they reflect on different screen sizes ?
