Let suppose you have a media query such as @media screen and (max-height: 470px) and (max-width: 900px)

While there is a resize on keyboard open, two options appear.
if you are using a framework on mobile development, such as Cordova, look for some framework built-in event,

like,

window.addEventListener('native.showkeyboard', keyboardShowHandler);
window.addEventListener('native.hidekeyboard', keyboardHideHandler);

and implement a solution in keyboardShowHandler or keyboardHideHandler


or use some other event types, since we can define our events, it's up to the
framework to specify the EventTarget.dispatchEvent().


Else, for website browser usage,


Use a 'focusin'/'focusout' approach, depending on your need, or a 'resize' event, but since we are concerned about
the keyboard, we suppose the user is typing, and there is no other resize event as portrait/landscape transition.

Solution:

Use focus events (js) to prevent the css resize rule to apply in this case.