(CSS) Refining the targeting of mobile devices

Long, long ago, in the before times (10 years ago) we only really had to worry about the latest crop of large 16:9 monitors after years of designing for various sized 4:3 aspect ratio displays. It was a glorious time to be alive, the sun shone, the birds sang and the flowers were always in bloom.

Then the bad man came, with his black turtleneck and glasses, and he stood on a stage in front of a cheering audience applauding the end of sanity in web design. The dark followed the bad man, everyone wanted to make something that worked the same as the bad man's device, but they all had different thoughts about how big those devices were, the "perfect" aspect ratio and even how many pixels to jam into every square inch. Bedlam ensued. Now there are literally hundreds, if not thousands, of varying device sizes, pixel densities and aspect ratios across more and more devices every day. There's simply no efficient way to detect the individual device and serve appropriate code, so now we have to design our sites to be fluid with certain breakpoints in mind for a handful of specific devices.

There will always be some cross over where a small tablet gets the phone css or a large phone gets the tablet's, or maybe the refrigerator door sees the desktop css when it was really supposed to see what the dash board of the luxury car uses.

My point is, crossover is inevitable. You'll drive yourself nuts trying to design for every possible specific device. If there is one you absolutely need to have, combining the other attributes available to css media queries can help. Device-width and pixel density are good ways to help narrow down the css for very specific devices, but even then there will likely be unexpected crossover with some other device that reports to the browser in an unusual way.