How to redesign ionic app layout so it looks good on all devices?

@Lay wrote:

For example I want to set the height of a button and make it 20% of the devices's vertical viewport. I can go and change it in the CSS file. But that doesn't take different screensizes into account. For example setting the attribute "height" of that button (or any other element) to 20%, but that means it is 20% of it's parent element, but not the height of the screen size of a given device. I can set it to a specific value in px. But that means the button's height is fixed.

I could do it with viewport: vh, vw. But this is not supported on older devices (~Android 4.4). I'm thinking of doing it with vanilla JavaScript:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    viewPortWidth = w.innerWidth || e.clientWidth || g.clientWidth,
    viewPortHeigth = w.innerHeight|| e.clientHeight|| g.clientHeight;

   button.height = viewPortHeigth * .2 + "px";// height of button will be dependent on device's viewport height

But I wonder whether there is another method that is recommended by experienced developers or the ionic team.
How can I set certain elements to a certain value relative to the device's size.

Posts: 3

Participants: 2

Read full topic