Xcode 6 Do I have to make an application for every screen size?

Question

So I have created my webapplication and when I build it in xcode I have to under "Simulated Metrics" > "Size" set it to 3.5 inch since I have a iPhone 4s. When I build it and run on the iPhone everything looks perfect, but I want this application to run on iPhone 5/6 aswell, but when I change the size to something else in the Simulated Metrics it gets really messed up on my iPhone. I'm using a webview of my responsive website which shouldn't really care about the screensize but I believe Xcode does. So, is there a solution where xcode automatically detects screensize and makes the webview take the whole viewcontroller? Or do I have to create a application for every screensize?

Answer 1

So, is there a solution where xcode automatically detects screensize and makes the webview take the whole viewcontroller?

Yes - xcode provides ways to do this. Either through auto layout or using springs and struts. With auto layout you will define a set of rules that your UI will follow. If you want 1 layout for all devices it's fairly straightforward and any tutorial will get you started. with springs and struts you just tell your views how they should grow/stay put depending on screen growing. check this out for a quick introduction to auto layout: http://www.raywenderlich.com/83129/beginning-auto-layout-tutorial-swift-part-1

Or do I have to create a application for every screensize?

Nope.. but you can set different constraints in auto layout for your views to behave very different on different sizes. This gets a little more tricky..

Answer 2

No you do not make a new app for every potential screen size, instead you uses XCode's "auto layout" with a set of "constraints" controlling the size and placement of your widgets. A constraint can be a fixed size for the widget or a given distance relative to another widget (or the parent's border). It is not necessarily a fixed distance, it can also be "my widget needs to be less than 10 pixels apart from this other widget".

The "Simulated Metrics" you refer to in the bottom of the drawing area is only a visual help when laying out you your GUI, it has no effect at runtime. You can safely stick with "Any" width and height.

Read this tutorial to understand XCode's auto layout and constraints:
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1

Quickly, these are the tools used to setup constraints:

In your case, assuming you have only one big view (your webview), you need to set up 4 constraints stating that the webview's left, right, top and bottom sides are 0 pixels away from the parent's left, right, top and bottom borders respectively:

1. Lay your webview in the middle of your drawing area
2. Click on it
3. Click the "pin" button; you will see this view:

4. Look at the upper part of the dialog: the small square in the middle represents the view you just clicked and the four red lines represent the distances to the parent's side. Set them all to 0 and click "Add 4 constraints". (Note: the lines are initially dashed when not selected; they turn into solid lines when activated.)

5. Now the frames in the drawing area do not represent what you were expecting: your webview is still in the middle where you placed it initially and does not fill all the available space; XCode is aware that there is a mismatch between the frames and the constraints and shows a warning. You need to update the frames: click the "issues" button and "update all frames".

The image comes from this question on SO:
What is "Constrain to margin" in Storyboard in Xcode 6
Read it to learn about the "Constraints to margin" switch.