Targeting specific devices through media queries

To build a bulletproof mailer, you will need to use specific code for some specific e-mail clients and devices. This is more difficult to do because of the problems with debugging (there is no good debugger/inspector to check behaviors live). Which devices do we need? Let's create a list:

• iPad or iPhone with retina and non-retina display

• Android devices with:

  • Low density (pixel ratio smaller than 1)

  • Medium density (pixel ratio equal to 1)

  • High density (pixel ratio greater than 1)

    @media only screen and (max-device-width: 480px) {
    }

This set with which you will match tablets and small screens:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

Retina display is known from iOS devices such as iPhones, iPods, and iPads. These devices can be targeted with this media query:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}

Target low density Android layouts:

@media only screen and (-webkit-device-pixel-ratio: ...