Modules > Responsive Media > Device Pixel Densities

Discovering Various Device Pixel Densities

Since the introduction of the first Retina screen, device manufacturers have been in an arms race to create increasingly higher density screens. There are far too many devices and dpi resolutions for a sane person to keep track of.

Below is a chart of devices that you're likely to run in to for this class (admittedly Apple biased).

Important Points

• The classroom iMacs have a dppx of 1.
  This means they have a 'standard' resolution or non-retina display. You should not notice much difference on these computers when working with high resolution images.
• iPhones 4–8 all have a dppx of 2 while the iPhone 6 Plus is slightly higher, but not 3dppx. You should notice some difference with high resolution images although it may be hard to tell on the smaller screen sizes.
• Some new mac laptops like the new MacBook Pros have a dppx of 2. You should notice some difference with high resolution images
• All recent iPads except the original Mini have a dppx of 2. You should notice some difference with high resolution images
• There are several different larger Android devices that have 3 or 4 dppx (several different Samsung Galaxy models) You should notice some difference with high resolution images. iPhone 7 Plus and 8 Plus have 3dppx.

Finding information about various devices

There are several good websites that will give you information about the displays of devices. DPI Love will give you information about your current display resolution and density as well as a table of many other devices.
• DPI Love
• Screen resolutions cheatsheet
bjango.com has a testing suite that gives you information about the device pixel ratio of your device and a listing of others broken down by dppx. This listing is more suitable for information in a CSS media query.
• Device pixel density tests

Modules > Responsive Media > Device Pixel Densities