The hardware industry has created massive touchscreen TVs, really large tablets (like the iPad Pro), and even huge touch desktop PCs (like the new, jaw-dropping Surface Studio). This means we can no longer assume that a small viewport is a touch screen and a large viewport isn’t.
CSS Tricks
Pointer
We can use media queries to adapt designs to the “accuracy” of a user’s pointer.
The primary pointing device is of limited accuracy, e.g. a finger:
@media (pointer: coarse) { ... }
The primary pointing device is accurate, e.g. a mouse or stylus:
@media (pointer: fine) { ... }
There is no pointing device:
@media (pointer: none) { ... }
Hover
We can use media queries to detect the user’s abilities to hover over elements on a webpage.
The user is on a touch screen device where the primary pointer system is the finger and they cannot hover:
@media (hover: none) { ... }
The user is on a device were the primary input is a mouse:
@media (hover: hover) { ... }