I was trying to do a device-detection (for smartphones, tablets and notebooks) and I ended up in this SITE that shows pretty much all I needed. Unfortunately I was told that those queries (ex: device-width) were deprecated!
Is there any workaround to this?
From my practice so far, I can tell that device-specific media queries are most definitely not the right thing to do. The thread that you just posted also includes this statement:
If you're reaction to this is: you should never base your breakpoints on devices!! You have a good point.
Mobile-first approach is also a thing that I do not practice. (from minimum-width up)
The best practice that fits in all of my projects, be it thus an app or a simple website, incorporate the max-width media queries, which start from your main resolution and finish at the smallest possible screen.
The trick is not to use a strict set of resolutions, but to use the required resolution for your specific problem while resizing the viewport.
Just go to MDN and read about media queries. Use min-width queries only for resolutions above 1920px and stick to max-width for lower-res.
Most generic media query that you can put to use without worrying:
@media screen and (max-width: *px) {}Where the * is the pixel width value of the viewport width that You want to address.
All that Sqnkov wirtten here applies, so in big shortcut use max/min-width instead.
But there is always a but and here is why... If you are interested in pixel perfect solution you should consider adding to you arsenal max/min-resolution for modern browsers and device-pixel-ratio for older ones (CanIUse: Media Queries: resolution feature) for detecting high dpi screens. Reason behind this is not to force users to use magnifying glass when using such display i.e. retina displays or 4k gamer screens. On topic of where and how to put your breakpoints I really like Responsive UI chapter of Material Design guideline. They use dp unit which is relative unit based on screen density (more about the topic here (Material) and here (MDN)). If you like what they did in the area of responsiveness simply check their CSS rules from under F12 dev tools, where they (at the time of writing) look like this:
@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:800px),
only screen and (min--moz-device-pixel-ratio:2) and (max-width:800px),
only screen and (min-resolution:192dpi) and (max-width:800px),
only screen and (min-resolution:2dppx) and (max-width:800px)
In other words to make long story short and to refine Sqnkovs answer you may want to take under consideration screen density as well.
If you need to adapt your styling to the size of the browser window, use max-width or min-width. That's more user-friendly than using the deprecated device-width feature anyway, because it means that a desktop user who likes to resize their browser window to take up only half the width of their screen will get to have your site rendered sensibly and not be forced to horizontally scroll.
If you're truly trying to do device detection (for instance to work around an iPhone-specific bug, or to conditionally display an advert for a phone repair shop based on whether the user's particular smartphone model is one that the shop works with), try to identify the device through its User-Agent, either server-side before serving your page or in JavaScript through navigator.userAgent. Trying to use device-width and device-height for device detection is crazy in most circumstances; there are thousands of different smartphone models, so it's pretty likely that one of them has the same size as the device you're testing for and will therefore trigger a false positive.
(You should also consider whether you really need feature detection rather than device detection.)
