How to prevent browser zoom from trigger stylesheet media query attrs
<p>I just swapped out all media queries on my company's platform from px=>em and I'm not seeing the result I expected after reading many other threads like <a href="https://stackoverflow.com/questions/22228568/switching-to-em-based-media-queries">this</a>: <a href="https://stackoverflow.com/questions/22228568/switching-to-em-based-media-queries">Switching to Em-Based Media Queries</a> and a handful of blogs praising em's over px.</p>

<p>When I have a stylesheet that is meant to only show like this:</p>

<pre><code>&lt;link rel="stylesheet" href="css/special.css?256D" type="text/css" media="screen and (max-width: 64em)"&gt;
</code></pre>

<p>... I want the style sheet to show up when the size of the WINDOW is below 1024px, or 64ems. My html font size is hardcoded at 16px.</p>

<p>When I check the ems via this handy snippet from another SO question:</p>

<pre><code>$(window).width() / parseFloat($("html").css("font-size"));
</code></pre>

<p>... I get different values at different zoom sizes, because the value of window.width changes with the zoom. This is wrecking the mobile experience for my users since only the size of the true screen should dictate what is being displayed.</p>

<p>Is what I want possible without serving dynamic content via JS, etc? </p>