Responsive Design: Everything shrinks when mobile keyboard is active

Question

There are many screen resolutions in browsers nowadays, so using px in my CSS sizes isn't actually a good idea. I adopted and used vh in substitution for px since it is based on the current viewport's size and then adjust textbox/img/div or anything that has a size: ...vh;

This is actually good but somehow when I try to tap on the textboxes and then the keyboard appears, the stuffs resizes and shrinks down from this:



To this:

This somehow never happens on iOS, only on Android phones. (It's probably with Android's keyboard popping out and taking out real-space from the browser)

Is there someway to fix this, if not, is there anyway that I can adjust my textboxes/divs that'll still be responsive to any mobile resolutions? Thanks!

Answer 1

Since the Android keyboard might be consuming real space in the browser, the viewport height decreases causing everything to shrink. In this case, you can use pixels instead of vh as I don't think it's important to use vh. Using pixels in this case won't affect the site's responsiveness.

You can also check out this thread if it helps.