Viewport, and device width: is it possible to make an responsive to height as well as width?

Question

My question is basically all in the title. I am wondering if there is a way to adapt the display of ones app not only depending on the width of the device's screen but also depending on its height.

Let's take an iphone for example: The iPhone XR has a viewport of 414 x 896, while the iphone 8 plus or 7plus have viewports of 414 x 736.

So the width is the same but not the height. I am trying to display some content that fills the screen, but from what I know, I can only make that content responsive to the width of the device. There are ways to go around like putting everything inside a container and set it's height to 100%, or something like that. But I was wondering if there was a similar approach to the viewport.

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS:

@media screen and (max-width: 720px) {
  }

Thanks!

You can for example use `@media screen and (max-width: 720px) and (max-height: 720px) {}` if that is what you mean. — roye7777777, Jun 12 '20 at 14:47
This might help: https://stackoverflow.com/a/43790532/7426944 — Jeff Berlin, Jun 12 '20 at 14:49
Yes this does help, thanks! I looked but couldn't find nowhere that I could use max-height the same way I could use max-width. Thanks! — Olivier Girardot, Jun 13 '20 at 13:12

Viewport, and device width: is it possible to make an responsive to height as well as width?

0 Answers0