Why Is My Fixed Nav Cuts Off Under Android Browsers? A Responsive Page Question

responsive android css html5

Here is a nasty bug, specifically Android devices.

Supposedly you have your resposive page all done, with a fixed nav bar on the top in mobile view, tested and works great until all desktop browsers and iOS devices.

You hit a snag. Oh no. It's under Android.

 

Why is the nav bar cuts off when I scroll page down while the browser's search and menu bars moved and hid under the screen?


Does this mean I have to add weird hack CSS code specifically under media query, for ONLY Android version of Chrome? What if this hack isn't compatible with other browsers like Firefox and Opera?

Fear not. It's just a simple fix. Relax. Get a cup of coffee.

Check your meta header definition, and make sure it looks like this:


<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">

 

No more weird CSS hacks. Happy Friday!