Change the height of the screen on the open keyboard

Question

I am developing a hybrid application with Cordova. I used vh and vw to lay out my design and size of everything, so that small differences in screen size all work well. My problem is that on Android, when the keyboard opens the vh value, it changes from full screen mode to the part of the screen that is still visible above the keyboard. This does not happen on iOS.

Any ideas on how to get around this? Do I have to completely change my layout strategy to use a different type of dimension in css? Should I determine the screen sizes and then set all the heights using js (which seems horrible)? 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 almost the only way to handle this. Or you can use only the width of the viewport and avoid the height of the viewport.

Here is a resource you can pay attention to can also help.