4

I'm making a strictly mobile website with a navigation bar and a picture that zooms. Whenever I zoom in on the site to make the picture larger, the navigation bar will grow, along with the text inside of it. Anyone know how I can stop the nav bar from zooming? Here's the CSS:

#navBarMobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 174px;
    background-color: rgba(0, 0, 0, 0.63);
    z-index: 2;
}
user3245765
  • 73
  • 1
  • 6

2 Answers2

0

The way you can make your website not zoom-able would be adding the following meta tag:

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

But this also makes the image not zoom-able. There is no other way your user could not zoom the website and, in consequence, the navigation bar.

This post could be useful.

Community
  • 1
  • 1
vanntile
  • 2,727
  • 4
  • 26
  • 48
  • Thank you for your response. I'm aware of that method, but do you know if this can be done in javascript or another method? – user3245765 Aug 18 '15 at 15:26
  • Really, I don't think javascipt could help because when you resize something on mobile you change the dpi... – vanntile Aug 18 '15 at 16:12
0

You can style your nav with viewport relative units vh and vw instead of %, px, pt... Properties like sizes, margins, fonts, shadows, borders can all take vieport relative units and will appear to ignore zoom if styled correctly.

{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;     //use vw 
    height: 3vh;      //use vh
    font-size: 2.5vh;  //use this for fonts and other properties
    background-color: rgba(0, 0, 0, 0.63);
    z-index: 2;
}
Juan Borda
  • 71
  • 6