Layout missed up on 3.5" Screen iPhone 4

Question

I have developed my App on XCODE 8 which by default removes iPhone 4 emulator and I didn't notice that until I finished my app, and I used Auto layout to make the UI fits all iPhone screens and that what happened (the layout was good on iPhone 7,6,5) the problem is when I additionally installed iPhone 4 emulator I found that the layout is totally missed up and unreadable/usable.

So what options do I have to solve this and make it fit the iPhone 4 screen too with Auto-Layout with missing up the other sizes ?

Here is screen shot of my Login screen on iPhone 6 (4.7") vs iPhone 4 (3.5")

Answer 1

You must always give constraints with respect to other alternative buttons or a view, it should not be hard coded. Try making views programatically, it will be more easy and helpful to you.

Answer 2

It seems like your constraint is set to have a fixed distance related to the top of your screen. So when the screen height get smaller, your views are pushed out of the screen. So to better adjust views position, you can have your views to be related to vertical center. Say your login box is in both horizontal and vertical center, not metter you are using iphone 6 or 4, you should always see your login box.