In the head of my responsive web site I use the following meta tag

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

Then in a head script element

//<![CDATA[
document.writeln("<div class='debug'> w("+
screen.width /16 +")-screen-h("+
screen.height /16 +") -- w("+
window.innerWidth /16 +")-inner-window-h("+
window.innerHeight /16 +")</div>")
//]]>


Also in the head I have the following style sheets

<link rel="stylesheet"
href="assets/responsive/base.css">
<!-- small devices -->
<link rel="stylesheet"
href="assets/responsive/base-small.css"
media='screen and (min-width:20em) and (max-width:48em) ' />
<!-- small landscape device -->
<link rel="stylesheet"
href="assets/responsive/small/landscape.css"
media='screen and (min-width:30em) and (max-width:48em) ' />


The base.css has this css for the debug class

.debug {
background-color:green;
}


The small-landscape has this css for the debug class


.debug {
background-color:magenta;
}


You may notice in my media query setup that I follow the design principle of designing for mobile by default and then building up the device sizes from there.

Best luck!