Media queries for tablet min-resolution and max-re

Question

Currently working on a responsive design website. I use media query for targeting different devices based on the width and screen resolution.

1. I have a scenario were i wanted to use the screen resolution to target the devices, but i don't understand how this works.

2. I wanted to check both min-width and max-width, with that the screen resolution may also range from 97dpi to ipad max resolution 264dpi. But this does not seems to work. If i give a single resolution min-width:155dpi for hp loaded tablet it works. But min to max resolution condition seems not working. Could you guys share your idea.

For this i have used like the below code

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

Answer 1

These MQs will handle the preset settings in the Windows8.1 simulator:

@media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768),
  screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768),
  screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080),
  screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) {
  body {
    background-color: red !important;
  }
}

@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200),
  screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080),
  screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) {
  body {
    background-color: violet !important;
  }
}

@media screen and (max-resolution:  174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440)  {
  body {
    background-color: purple !important;
  }
}

Answer 2

According to older measurement by Quircksmode http://quirksmode.org/tablets.html

@media screen and (min-width: 37em) {
}

however, this doesn't work best for newer tablets I guess, since my phone has 37em or more.

What about:

@media screen and (min-width: 42em) {
}

Answer 3

The resolution media query doesn't have good support in webkit browsers yet so you may have more success using device-pixel-ratio instead.

http://bjango.com/articles/min-device-pixel-ratio/

So we can restate your media query using resolution for those browsers that understand it (Firefox, IE9+, Opera), and device-pixel-ratio for all things webkit (Chrome, Safari, iOS and Android):

@media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px),
       only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {}