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.

Answer 2

I use this and it works perfectly:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1">
<link href="/cssL.css" rel="stylesheet" type="text/css" media="(min-width:1000px)" />
<link href="/cssM.css" rel="stylesheet" type="text/css" media="(min-width:551px) and (max-width:999px)"  />
<link href="/cssS.css" rel="stylesheet" type="text/css" media="(max-width:550px)" />

you have used semicolon instead of comma in your viewport meta, maybe it has caused the problem.