Why are css styles reset when opening the keyboard? And what to do with it?

Question

css

For display on mobile platforms we use in css

@media only screen and (min-width: 320px) and (max-width: 374px) and (orientation: portrait){
...
}

I have the following problem on android.
everything works fine until any input field receives focus, or rather, until the keyboard appears on the screen. At this point, desktop styles begin to be used, and the form breaks in width. When you hide the keyboard, everything returns to its original size.
Why is this happening and what to do about it?

Answer 1

Most likely this happens because of this condition (orientation: portrait):.
What to do with it? Removing this condition is not an option?
Similar question on SO:
stackoverflow.com/questions/8883163/css-media-quer...