How CSS Pointer Coarse Detects Touchscreens

The pointer: coarse CSS media query detects touch-screen devices by querying the precision of the user's primary pointing device. Part of the CSS Media Queries Level 4 specification, this feature allows developers to serve larger touch targets and optimized layouts specifically for lower-precision inputs like fingers. Rather than relying on unreliable browser user-agent sniffing or screen width breakpoints, pointer: coarse relies on hardware capabilities reported directly by the operating system to determine how the user interacts with the screen.

The Mechanism Behind Pointer Precision

Web browsers interface directly with the host operating system's input APIs to inspect connected hardware. The CSS pointer feature evaluates the primary pointing mechanism using three possible states:

• none: The device has no pointing device at all (such as a basic smart TV or non-touch feature phone).
• fine: The primary pointing device is highly accurate, such as a traditional mouse, trackpad, or high-precision stylus.
• coarse: The primary pointing device has limited precision, such as a finger used on a touchscreen or a motion-tracking game controller.

When a device like a smartphone or tablet loads a webpage, the operating system identifies the capacitive touchscreen as the default input device. Because human fingertips cover a relatively large physical area and lack pixel-level precision, the browser classifies this input as coarse.

Primary Input vs. Any Input

The standard pointer media query only checks the device's primary input mechanism.

/* Styles applied when the primary input is inaccurate (e.g., smartphones, tablets) */
@media (pointer: coarse) {
  button {
    min-height: 48px;
    padding: 12px 24px;
  }
}

On a smartphone, the touchscreen is primary, so @media (pointer: coarse) resolves to true. On a desktop computer with a mouse, the primary input is accurate, so the query resolves to false, even if a user has a secondary touchscreen monitor plugged in.

To account for hybrid devices, such as touchscreen laptops or tablets with connected trackpads, CSS provides the any-pointer media query.

• pointer: coarse evaluates only the primary input mechanism.
• any-pointer: coarse evaluates all currently available input mechanisms.

If a user attaches a mouse to an iPad, the iPad's pointer value may shift to fine depending on the operating system's behavior, but any-pointer: coarse will remain true because the touchscreen is still present.

Precision Detection vs. Touch Detection

While pointer: coarse is the modern standard for touch adaptation, it technically measures input accuracy rather than touch capability itself. A device using a Nintendo Wii remote, a Kinect-style sensor, or an Apple TV remote will also evaluate as coarse due to low pointing accuracy. Conversely, a dedicated graphics tablet with a high-precision stylus might evaluate as fine, even though it uses a touch-sensitive surface.

By designing around accuracy rather than the physical hardware type, pointer: coarse ensures interfaces adapt dynamically to how comfortably and accurately a user can click or tap an interface element.