Why tap target size matters

On mobile devices, interactive elements like buttons and links need to be large enough—with adequate spacing around them—so users can tap them accurately without accidentally hitting neighboring elements. This is especially important for people with motor impairments, but it benefits every user on a touchscreen.

A good rule of thumb is a minimum touch target of about 48 device-independent pixels on a site with a properly configured mobile viewport. That roughly corresponds to 9mm, close to the size of a finger pad. An icon that is only 24px wide, for instance, can be brought up to spec using padding around it.

You should also leave about 8 pixels of space between targets, both horizontally and vertically. That gap prevents a user's finger from overlapping onto an adjacent target while pressing.

Checking your target sizes

If you've sized text and padding with relative units like em or rem, you can verify the final pixel dimensions using browser developer tools.

In Chrome DevTools, inspect the element and open the Computed pane to see the resolved pixel size of each part of the box model. In Firefox DevTools, the Layout Panel gives you the actual rendered size of the inspected element.

The Layout Panel in Firefox DevTools showing the size of the a element

Adapting to touch input with media queries

Rather than guessing a device is a phone based on viewport width, you can use media queries to tailor your UI to the actual input capabilities of the device.

The pointer and any-pointer media features tell you whether the user's primary input—or any detected input—is a touchscreen. Both return either fine or coarse. fine means the user has a mouse or trackpad, even if it's a Bluetooth accessory connected to a phone or tablet. coarse signals a touchscreen, regardless of the device's size or type.

To enlarge tap targets for all touchscreen users, apply your adjustments inside a media query that tests for a coarse pointer. For more on interaction media features like pointer, see Responsive web design basics.

.container a {
  padding: .2em;
}

@media (any-pointer: coarse) {
  .container a {
    padding: .8em;
  }
}