Search code examples
htmlcssmedia-queriesorientation

CSS Media Query - target tablets more carefully

I've been using media queries to target tablets and down just by writing:

@media only screen and (max-width: 1199px) { ... }

However, I came across a tablet this weekend whose resolution were even bigger than that, triggering a menu it wasn't supposed to see. Normally, I don't care since I use these queries to trigger design changes that normally looks good in that resolution but in this particular case, it's not good since a hover based menu showed up that's obviously really hard to use on a tablet.

So I've been tinkering a bit with writing a media query that triggers on EITHER max-width or both of the orientations, like this:

@media handheld, (max-device-width: 1300px), (orientation: landscape), (orientation: portrait)  { ... }

However, this seems to trigger on my computer as well and I don't understand why. Anyone know why, or has a better solution to my problem?

Solution

  • It's because you are using , instead of and in you media query condition .

    For example: 

    @media handheld and (max-device-width: 1300px) and (orientation : landscape) {
   .div {....}
} 

@media screen (max-width: 449px), handheld and (orientation:landscape) { ... }

    Try this one.