How to better target mobile devices with CSS

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.

Leave a Reply