Media query not working with max-width but working with max-device-width

Question

I am trying to adapt my site to tablets so when I include external CSS file like this

<link rel="stylesheet" media="screen and (max-device-width: 960px) and (max-device-height: 1280px)" href="/css/tablets.css" />

the media queries work but when I use max-width and max-height they don't work. And the funny thing is that when I try to use media queries for landscape mode, it is the opposite situation:

<link rel="stylesheet" media="screen and (max-device-width: 1280px) and (max-device-height: 960px)" href="/css/tablets.css" />

doesn't work whilst max-width and max-height do work. What's up with that?

For testing, I use iPad Mini Retina.

Answer 1

It's probably because you didn't use viewport in head tag.

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

I did test the code and it works fine.