title: Does pinch zoom trigger media queries?
body: <p>I've been developing a website on my local machine that has a fixed nav menu at the top. When a browser zooms in, I use media queries to compress the space between objects in the header so all objects fit on screen, and this works well on desktop.</p>
  
  <p>However, I've noticed when testing on a mobile device (Android Galaxy S3) that these media queries are not triggered on pinch zoom, resulting in the icons expanding past the limits of the mobile viewport.</p>
  
  <p>I can't find good documentation of this behavior online. I've seen it mentioned sporadically that this is designed behavior, and pinch zoom is like a 'magnifying glass' that should not activate media queries. I'm considering disabling the nav menu on mobile entirely. Is there a native way to deal with this problem, or will this require a javascript solution?</p>
  
  <p>Here are two pictures. The first is the nav menu at no zoom, the second is the nav menu pinch zoomed on a mobile device.</p>
  
  <p><a href="https://i.stack.imgur.com/1lrux.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1lrux.png" alt="nav menu with no zoom"></a></p>
  
  <p><a href="https://i.stack.imgur.com/WEUUl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WEUUl.png" alt="nav menu acting badly with pinch zoom"></a></p>
  
  <p>Below are the two media queries I'm currently using. Note that I am using the meta viewport tag to set the content width as well; I can't think of anything else that might influence this behavior.</p>
  
  <pre><code>@media screen and (max-width: 74em){...}
  @media screen and (max-width: 47em){...}
  </code></pre>
  
  <p>I have tried px measurements as well.</p>
  
  <p>Let me know if any more information is required. Thank you for your help.</p>