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


#1

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.


#2

you have the viewHeight property : see the vh section on
https://developer.mozilla.org/fr/docs/Web/CSS/length

in your css, you can do
.myClass {
height : 20vh;
}

be careful though to ionic properties, some dimentions are hard coded in px, I sometimes have to override it.


#3

As I mentioned “vh” is not supported on all devices. Especially old devices (~Android 4.4) doesn’t support it and wouldn’t work on them.


#4

I’m sorry I didn’t read this part :confused:
Now I know more about it, thank you