Window Height 100% in mobile chrome

Question

I have a responsive website where the first div on the site fills up the entire height of the browser using height: 100%. Mobile Chrome Browser unfortunately hides the address bar on some devices including iPhone, iPad and many Android devices. This leads to a page jump because right after scrolling the height of the window grows plus the height of the address bar.

How do I prevent this?

Thank you!

Answer 1

Write some JS to determine the window size and set the height to that pixel value instead of a percentage. Make sure to handle orientation change events to account for that scenario as well.