Is it possible to keep the size of a <div> element static when the user zooms in with css only?


I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.

Illustration of the problem:
Without zoom No Zoom

With zoom With zoom

I know this is possible with JavaScript as described in this approach:
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?

Problem courtesy of: rob


There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.

Solution courtesy of: Daniel Imms


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.