With the permanent increase in mobile devices resolutions it becomes harder to target these based on screen width (there are plenty of 1920 x 1080 devices out there and some tablets go even higher, while there also are a lot of 1366 x 768 or similar laptops).

So, how could we reliable write CSS code to target mobile devices?

Well, that’s simple!

Check for “pointer” capability:

@media (pointer: coarse) { ... }

(This media query targets devices with a coarse pointer – a finger; otherwise we could use “fine” instead – that being a mouse)

Or check the “hover” capability instead:

@media (hover: none) { ... }

(This applies to devices that supports hover, so it targets non-mobiles)

While these queries worked for me in all situations it’s good to know that there’s also a way to target devices based on more than one pointing device capabilities. This is “any-hover” query, described pretty well here.