Viewport height changing upon keyboard open android

Question

I am developing a hybrid app with Cordova. I have used vh and vw to lay out my design and size everything, so that slight differences in screen size all work well. My issue is that on Android, when the keyboard opens the value of vh changes from full screen to the portion of the screen still visible above the keyboard. This doesn't occur on iOS.

Any ideas on how to get around this? Should I totally change my layout strategy to use another type of dimension in css? Should I figure out the screen dimensions, then set all the heights with js (which seems terrible)? Any help with best practices would be great.

Thanks,

Scott

Answer 1

@media screen and (min-aspect-ratio: 1/1) { /* landscape styles here */}

@media screen and (max-aspect-ratio: 1/1) { /* portrait styles here */}

This is pretty much the only way to deal with that. Or you could try to use viewport width only and avoid viewport height.

Here is a resource to look at might help as well