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