With so many mobile devices, laptops and desktops in the market, it’s quite tough to craft device-specific CSS media queries.

The situation is further complicated due to variances in pixel densities. Devices with a Retina Display, for example, offer twice the number of pixels-per-area than older iOS devices.

If you ever find yourself needing to create a user interface that specifically targets certain mobile devices and/or monitors, you can find a list of device dimensions at this handy resource called Screen Sizes.

Screen Sizes

Information such as physical size, width, height and aspect ratio of popular smartphones, tablets and monitors can be found on Screen Sizes. The information on the site comes from Wikipedia.

As a general UI design strategy, I wouldn’t recommend creating sites that are only optimized for certain devices. It’s just not a scalable and maintainable way to approach the problem because new devices will continue to be released.

However, there might be some cases where there’s a valid need to target a certain device, or a group of devices, using media queries. Screen Sizes can help you determine the specs for these cases.

Author:

Jacob Gube is the co-founder of Design Instruct. Join him on Twitter @sixrevisions