This prototype is in iPhone SE format because the original assets were prepared for this 640 x 1136 resolution (320 x 568 points).
But to make it possible to also test this prototype on other iPhones, we’ll make it responsive. We’ll do it the easy way, by just making everything bigger.
We place all our layers inside a container that we’ll scale up when needed. This way we can keep using the x and y-positions and layer dimensions for a 4.0″ screen since everything will simply be ‘blown up’ on a 4.7″ or bigger screen.
# Container for scaling up the prototype container = new Layer width: 320 height: 568 backgroundColor: null originX: 0 originY: 0 scale: Screen.height / 568
We divide the actual height of the screen by
568 (the height of a 4.0″ screen) to get the correct scale for all the contents.
On an iPhone SE the result will be
1 (naturally), but on an iPhone 6 (or higher) the scale will be
1.174, and on an iPhone Plus even bigger.
The container’s transformation origin is changed to the top left so that everything scales up from this corner.
I should mention that all layers in Design are also anchored to the top left so that they will scale along nicely when placed in this ‘everybody’s parent’ layer.