Thumbs, and the things that do not exist

A fingertip is about nine millimetres across, which is roughly 44 CSS pixels, and people do not aim precisely, they tap approximately, one-handed, while walking. The platform guidelines converge on a minimum target of around 44 by 44 pixels with spacing between adjacent targets, and the second half of that matters as much as the first. Two correctly sized buttons with no gap between them are still a coin flip.

You can make a target bigger than it looks, which is usually what you want: a small visual icon with padding, or a pseudo-element stretched over a larger area, gives you a comfortable target without a chunky design. That technique is useful to learn once and using forever.

Hover does not exist on touch. Any information or action only reachable by hovering is invisible to most of your users. Tooltips, dropdown menus that open on hover, card actions that fade in, each needs a tap-accessible path, and "it works if you tap once then tap again" is not one, because nothing tells the user that is the rule.

The correct way to ask is not screen width. @media (hover: hover) is true for devices that can really hover, and @media (pointer: coarse) is true for touch. Use those. A tablet with a keyboard and a laptop with a touch screen both exist, and both break the assumption that narrow means touch.

Reach matters too. On a phone held in one hand, the bottom and centre of the screen are comfortable and the top corners are not. Primary actions in the top-right of a mobile layout require a grip change, so so many apps moved navigation to the bottom. A back button at the top-left is conventional and is also the hardest place on the screen to reach with a right thumb.

Then the small things that add up. Tap highlights: the grey flash on tap is feedback, and removing it without replacing it makes an interface feel broken. Font size on inputs: anything under 16px causes iOS Safari to zoom on focus, which is jarring and hard to undo. And the virtual keyboard covers roughly half the screen, so an input near the bottom of a form disappears the moment it is focused unless you have thought about scroll position.

Go and check your own site for three of these right now: target sizes, a hover-only path, and an input under 16px. Almost every generated page has all three.