Adjusting CSS for Individual Phone Screens

ionic-v1
1

I have a popover on my Ionic App. Based on the phone I’m using, my app will adjust the position of the popover. Here is my CSS as it stands.

#filterPopover {
  left: 25%;
  top: 24%;
}

If I want it to work for say an iPhone 5, I’ll have to change it to

#filterPopover {
  left: 25%;
  top: 19%;
}

What’s the most elegant way to adjust the CSS for each phone type/screen resolution the user may use for my ionic app? Thanks!

2

You could use media queries based on screen height. Something like:

@media screen and (max-height: 480px){
     <!--css for iPhone 4s-->
}

@media (min-height: 481px) and (max-height: 568px){
      <!--css for iPhone 5s-->
}