How to fix vh(viewport unit) css in mobile Safari?

Question

I\'ve used vh (viewport units) css in one of my projects but in mobile safari it doesn\'t work. It seems like Safari doesn\'t know what to do with vh, but it works fine in o

Answer 1

You can use jQuery in order to fix that.

$('container').height($(window).height()/2);

This works on every browser. Hope it helps.

Answer 2

I found this library very useful: https://github.com/Hiswe/vh-check

It will calculate the offset value for the correct vh, and put it in a css variable so you can use it in the css:

.main {
  height: calc(100vh - var(--vh-offset, 0px));
}