As someone who is less familiar with the underpinnings of native mobile apps than responsive websites, I'm trying to wrap my head around the mechanics of something that seems like it ought to be fairly basic. And yet, searching here and good old Google has left me empty-handed.
Responsive websites, of course, rely on media queries and breakpoints to determine how and where they should display elements and content within a browser. The upshot is that the user gets the same experience on almost any device. But that end result is also what native apps accomplish, isn't it? If a user has the same app on two different Android or iOS phones, the UI is rendered (for the most part) consistently. Obviously, they aren't using a browser. Do app developers use something similar to media queries? How do native apps know which way to display a UI across many devices with many different resolutions?
I'm not sure about ios, but in android, we use some sort of "selector". The selectors are different folders, corresponding the resolution of the phone or the version of the phone, which contains the same variables but with different values.
To illustrate, we might have a folder named drawable-mdpi and another named drawable-hdpi. Both folders contain an image file named home.png, the dimension of home.png is different for each folders. What android does is automatically select (behind the scenes) which folder to use based on the phone you are using. If you want to use home.png, you don't have to worry which folder to select because android does it for you, you just have to use the image itself by referring to @drawable/home. A more detailed explanation is here
There is another method which came out on version 3.2 for better management of dimensions. It involves checking width of the phone to select which dimensions to use. You better check this blog.
In iOS you use Autolayout and Constraints, usually in the Interface Builder but you can also do it in code. Essentially these let you setup rules which keep things in the right place 'relative' to each other / the frame of your app.
These two great articles were helpful when I started with them recently:
- http://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2
- http://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints
