0

This question is not a duplicate because I need a mobile web site with a sticky menu bar at the top that is not scalable, where as the rest of the page is scalable (for accessibility reasons).

So here comes the scalable part and I can't change this HTML line:

<meta name="viewport" content="width=device-width, user-scalable=yes"/>

For the sticky part, I use this CSS for the sticky menu bar:

#mheader {
  display: inline-block;
  height: 5em;
  width: 100%;
  background-color: #AB3C2E;
  color: #ffffff;
  padding: 1em;
  box-sizing: border-box;-moz-box-sizing: border-box;
  position: fixed;
  z-index: 100;
}

How do I make the menu not scalable? Means: when I zoom in on a mobile device, the menu should stay as it was in 1:1 view (100%). Where is the issue?

I tried this CSS approach in order to completely disable the scaling for the "mobile version" (overriding the HTML line) but obviously it is not yet supported by the mobile browsers or I'm doing something wrong:

@media only screen and (max-width: 35em) and (orientation:portrait),
       only screen and (max-width: 47em) and (orientation:landscape) {
  @-ms-viewport { width=device-width; minimum-scale=1.0; initial-scale=1.0; maximum-scale=1.0; user-scalable=no; }
  @viewport { width=device-width; minimum-scale=1.0; initial-scale=1.0; maximum-scale=1.0; user-scalable=no; }

}
basZero
  • 4,129
  • 9
  • 51
  • 89
  • 1
    I'm reasonably confident that this is not possible in pure CSS, and you may need to invoke some hacky JS Magic. – ivanreese Jul 10 '15 at 12:10
  • @OptimusCrime no, not a duplicate. I rephrased my question so that it addresses mobile browsers only. The other question is primarily about desktop browsers (catching key events for zoom functionality which is not the case in my question). – basZero Jul 10 '15 at 12:17

0 Answers0