Professional CSS3

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 ...