Mobile Emulator is picking the wrong stylesheet based on device width specified in media query...why?

Question

This is my meta tag...

<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

I am using breakpoints as max-320 then max-480, when I'm testing my page from a device width of 320, it's working fine but when testing the page with 480 device width it is still picking the 320 width stylesheet. Why it's picking the wrong stylesheet please help..

<link rel="stylesheet" media="only screen and (max-width:320px) and (orientation:portrait)" href="style/xxs_p.css">
<link rel="stylesheet" media="only screen and (max-width:320px) and (orientation:landscape)" href="style/xxs_l.css">
<link rel="stylesheet" media="only screen and (min-width:321px) and (max-width:480px) and (orientation:portrait)" href="style/xs_p.css">
<link rel="stylesheet" media="only screen and (min-width:321px) and (max-width:480px) and (orientation:landscape)" href="style/xs_l.css">

Is that a problem in my code or it's just the emulator acting weird? Please help!!

Answer 1

Try changing your code to:

media="only screen and (max-device-width:320px) and (orientation:portrait)"

for each line.