I have a page which looks like this:
<ion-row> <ion-col width-100> <ion-item> <ion-input type="text" placeholder="Username"></ion-input> </ion-item> <ion-item> <ion-input type="password" placeholder="Password"></ion-input> </ion-item> <button>Login</button> <button>Register</button> </ion-col> </ion-row>
As I run it on two different devices, one being the iPhone4, the other being the iPhone6 plus. As you can see the font sizes differ and the the iphone6+ everything looks more bunched together. I want to stay as much as in the framework as I can so is there a way to have the font adjust depending on the screen size so it looks more uniform across devices? As well, is it possible to have the inputs and buttons spaced out appropriately depending on the screen size?
Since I think examples work best, in the iphone4 roughly 50% of the total height has content in it. In the iphone6 roughly 20% has content in it. I would like the iphone6 to have roughly 50% of it’s height filled with content such as the iphone4. The content should also scale meaning the fonts and the margin between elements should scale proportionally.