Media Query not working as expected
<p>I have the follow code.</p>

<pre><code>@media only screen and (min-width : 320px) and (max-width : 500px) 
</code></pre>

<p>I have no idea why this rule only works until 480px, This is the following code I'm using to detect the window size. </p>

<pre><code>jQuery(window).resize(function (){
  console.clear();
  console.log( jQuery(window).width() );
});
</code></pre>

<p>The above jQuery is <strong>ONLY USED TO DOUBLE CHECK THE WINDOW</strong> </p>

<p>I have <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code>
The issue here is the rule only works until 480px not 500px which it should. </p>