Min-width and Max-width css media queries

Question

<link href="css/mobile-large.css" media="all and (min-width: 481px) and (max-width: 760px)" rel="stylesheet" type="text/css" />

Shouldn't that line of code do so that the stylesheet "mobile-large.css" be loaded when using a Samsung Galaxy Nexus with 720px in width? However it doesn't so what is the reason and how do I fix it?

I am using this too:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Answer 1

I think also you can remove "all and" from the query string.

Answer 2

May be you have to define device-width instead of simple width. Write like this:

<link href="css/mobile-large.css" media="all and (min-device-width: 481px) and (max-device-width: 760px)" rel="stylesheet" type="text/css" />