Ronalds Vilciņš

Interaction media features

You can detect touch screens, stylus-based screens or touchpads.

/* Make radio buttons and check boxes larger if we have an inaccurate primary pointing device */
@media (pointer:coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width:30px;
    min-height:40px;
    background:transparent;
  }
}

The pointer media feature has three values: fine, coarse, and none.

• fine: Indicates a device with a fine-grained pointing device, such as a mouse or a stylus.
• coarse: Indicates a device with a coarse-grained pointing device, such as a touch screen.
• none: Indicates a device that does not have a pointing device.

You can also use the any-pointer media feature to apply styles for any device that has a pointing device, regardless of the device’s level of granularity.

@media (any-pointer: fine) {
  /* Style rules for devices with a pointing device, regardless of granularity */
}

This site is ad-free and doesn’t use trackers. If you’d like to support my writing, I’d love if you could buy me a coffee.