Media query to detect if device is touchscreen

by

There is actually a property for this in the CSS4 media query draft.

The ‘pointer’ media feature is used to query about the presence and
accuracy of a pointing device such as a mouse. If a device has
multiple input mechanisms, it is recommended that the UA reports the
characteristics of the least capable pointing device of the primary
input mechanisms. This media query takes the following values:

‘none’
– The input mechanism of the device does not include a pointing device.

‘coarse’
– The input mechanism of the device includes a pointing device of limited accuracy.

‘fine’
– The input mechanism of the device includes an accurate pointing device.

This would be used as such:

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

I also found a ticket in the Chromium project related to this.

Browser compatibility can be tested at Quirksmode. These are my results (22 jan 2013):

  • Chrome/Win: Works
  • Chrome/iOS: Doesn’t work
  • Safari/iOS6: Doesn’t work

More Related Contents:

  1. What is the exact screen width and height of a phone? [duplicate]
  2. Media Queries: How to target desktop, tablet, and mobile?
  3. Can media queries resize based on a div element instead of the screen?
  4. What is the difference between max-device-width and max-width for mobile web?
  5. CSS @media print issues with background-color;
  6. Common breakpoints for media queries on a responsive site
  7. Nesting @media rules in CSS
  8. Should I use max-device-width or max-width?
  9. Common CSS Media Queries Break Points [duplicate]
  10. CSS media query to target only iOS devices [duplicate]
  11. What are the rules for CSS media query overlap?
  12. CSS native variables not working in media queries
  13. @Media min-width & max-width
  14. CSS specificity, Media Queries and min-width
  15. CSS media queries – Order matters?
  16. Prevent that a fixed element resizes when zooming on touchscreen
  17. Media query not working in IE9
  18. Which are the most important media queries to use in creating mobile responsive design?
  19. CSS media queries min-width and min-device-width conflicting?
  20. calc() not working within media queries
  21. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  22. How to detect if the OS is in dark mode in browsers?
  23. How to code CSS media queries targeting ALL mobile devices and tablets?
  24. How to control number of items per row using media queries in Flexbox?
  25. How do I combine two media queries?
  26. How can I avoid media query overlap?
  27. Media Query grouping instead of multiple scattered media queries that match
  28. Single vs multiple stylesheets in responsive web design
  29. @import styles not working in a media query
  30. @media query not working in mobile. Works fine in Chrome

Leave a Comment