Search code examples
cssionic4responsivehybrid-mobile-app

Ionic 4 how to do a responsive app using media queries?

I am creating a hybrid app with Ionic 4.

I use css media queries to do specific layouts according to the screen size mobile is needed. Example:

This how it looks my app in a viewport of 360x640 screen size pixels in browser:

enter image description here

But, this how it looks in my cellphone which have the same screen size (360x640) in pixels:

enter image description here

All the blue part is cut off of the screen.

here is the css:

@media screen and (max-height: 640px) {


.ultraipunt{   
    font-size:19px;
}

.tittle{
  font-size: 23px;
}

.tittle3{
  font-size: 19px;
}

.buttonclass{
    font-size:19px;
    height:60px;
}

.buttonfacebook{
    font-size:19px;
    height:60px;
}

.buttongoogle{
    font-size:19px;
    height:60px;
}

.fond1{
   min-height: 154px;
}

.fond2{
   padding-top:0.5em;
  padding-bottom:0.5em;
  margin-top:0px;
}
.textwhite {
    font-size:18px;
}
.textwhitebold {
    font-size:18px;
}

form{
    margin-bottom:0em;
    margin-top:0em;
}

.imgen1{
 width:65px;
}


}

Using the site: https://www.mydevice.io/, this are my cellphone specifications:

enter image description here

Now my questions are:

Why the css sizes are no translating well to my cellphone viewport? How can I do responsive design with ionic 4 for hybrid app?

Solution

  • In your mydevice.io capture can see screen.width and screen.height. You must not use that properties to calculate your available viewport resolution because it will always return the whole screen resolution (which is indeed 360px x 640px) not your viewport resolution (which will be less height usually and sometimes less width, for mobiles, depending on the display mode, and if the status bar is displayed and if the buttons bar is displayed).

    Instead of screen.width and screen.height use one of the several alternatives that will give you the real available viewport for your app: for example window.innerWidth and window.innerHeight.

    You are going probably to get less than 640px in window.innerHeight.

    About the media queries from css, it will use the viewport resolution, but you specified max-height:640px, and because your viewport height is less than 640px the rule matches, even if the height is less, even if you want other thing.

    So, as long as your real height is less than 640px you must add other/more css rules with even less height, or maybe use another approach (bottom anchoring or for more complicated scenarios JS for aid dynamic responsiveness based on innerHeight/innerTop properties).

    PS A bit off topic but very important: always, if you are using css-responsive on your own, try to double check if there is a meta viewport with at least width=device-width, otherwise mobile html renderer will probably do weird things.

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    PS2 I assume that you want to use your own stylesheets, otherwise probably there are tons of already made material for ionic.