Different CSS for touch and mouse input

Screen width does not tell you whether someone is using a mouse, a finger, or a stylus. CSS interaction media features can, with an important limitation: devices often have more than one input method.

The pointer feature describes the primary pointing device. One practical use is giving a coarse pointer larger controls:

@media (pointer: coarse) {
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 30px;
    min-height: 40px;
  }
}

pointer has three values:

• fine means the primary pointer can accurately target small areas, as a mouse generally can.
• coarse means its accuracy is limited, which is common for touch input.
• none means there is no primary pointing device.

A device may have several pointers

any-pointer checks all available pointing devices rather than only the primary one:

@media (any-pointer: fine) {
  .canvas-controls {
    display: block;
  }
}

A touchscreen laptop might match both pointer: coarse and any-pointer: fine: touch is primary, but a trackpad or mouse is also available. This is why “touch device” and “small screen” are not interchangeable ideas.

Use these queries to improve an interface, not to remove essential controls based on an assumption about hardware. I would keep tap targets comfortable by default and use interaction features only where the input method genuinely changes the design.

← Back to all articles