1

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:

enter image description here

To this:

enter image description here

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!

Dranreb
  • 185
  • 2
  • 10
  • 1
    Please check this link [Scalable Density Pixel](https://stackoverflow.com/questions/44630037/fill-the-dessert-in-my-head-with-dimens-xml/44630670?noredirect=1#comment76386789_44630670) – jaffar Jun 28 '17 at 12:41
  • 1
    and please let us know if it helps or else we will provide some alternate :) – jaffar Jun 28 '17 at 12:46
  • Refer this link : https://stackoverflow.com/questions/8556933/screen-styling-when-virtual-keyboard-is-active – Kakumanu siva krishna Jun 28 '17 at 12:52
  • @jaffarThanks! This actually pretty neat. One thing is that, I actually don't know how to use it, specially in css. And if you could, it would be good to have an alternative way to do it also? – Dranreb Jun 28 '17 at 12:54

1 Answers1

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.

Chirag Bhansali
  • 1,090
  • 1
  • 11
  • 20