In the realm of CSS4 media queries, there exists a property dedicated to exploring the characteristics of pointing devices, as outlined in the CSS4 media query draft.

The ‘pointer’ media feature allows us to delve into the presence and accuracy of different pointing devices, such as mice. It is advised that if a device has multiple input methods, the user agent should convey information about the least precise pointing device of the primary input mechanisms. The values for this media query include:

‘none’
- Indicates that the device lacks a pointing mechanism.

‘coarse’
- Points to a pointing device with limited accuracy in the device's arsenal of input mechanisms.

‘fine’
- Refers to a highly accurate pointing device available within the device's input mechanisms.

Implementing this feature can be done in the following manner:

/* Adjust size of radio buttons and check boxes based on the precision of the pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

A related issue in the Chromium project can be explored through this ticket I came across.

To test browser compatibility, one can visit Quirksmode. My findings from January 22, 2013, are as follows:

• Chrome/Windows: Compatible
• Chrome/iOS: Not compatible
• Safari/iOS6: Not compatible

In the midst of 2013, the availability of CSS solutions seems to be limited. However...

1. Nicholas Zakas points out that Modernizr adds a no-touch CSS class if the browser does not support touch.

2. Alternatively, you could detect it in JavaScript using a simple snippet like this, which enables you to create your own Modernizr-like solution:

   <script>
       document.documentElement.className += 
       (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
   </script>
   

   Then, you can structure your CSS as follows:

   .no-touch .myClass {
       ...
   }
   .touch .myClass {
       ...
   }
   

If you are looking to target a specific media query, you can use the following code snippet:

@media (hover: none) { … }

With good support across browsers like Safari and Chrome on mobile devices, it could be a reliable option until wider adoption is achieved.

Standard media types do not include touch capability detection, making it impossible to consistently achieve this through CSS or media queries:

http://www.w3.org/TR/css3-mediaqueries/

Therefore, the use of JavaScript is necessary for detecting touch capabilities without relying on Modernizr:

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("Touch support detected!");
</script>

Even in 2017, the CSS media query mentioned in the second answer still doesn't function on Firefox. I managed to find a solution for this issue by using the -moz-touch-enabled property.

Therefore, here is a cross-browser compatible media query:

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    .something {
        it's now working;
    }
}

Feel free to give this a try. If it doesn't work, just reach out.

@media (hover: none) and (pointer: coarse) {
    /* Specific styles for touch screen devices should be placed here */
}

hover:none is considered true when hover functionality is not available

pointer:coarse is considered true when the input accuracy is limited.

If your goal is only to manage hover effects, there is no need to involve pointer.

Edit: Hover on-demand feature has been discontinued.

Until the day when CSS4 is universally supported by all browsers, this solution will suffice. In the meantime, it works well for current browser compatibility.

browser-util.js

export const isMobile = {
  android: () => navigator.userAgent.match(/Android/i),
  blackberry: () => navigator.userAgent.match(/BlackBerry/i),
  ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
  opera: () => navigator.userAgent.match(/Opera Mini/i),
  windows: () => navigator.userAgent.match(/IEMobile/i),
  any: () => (isMobile.android() || isMobile.blackberry() || 
  isMobile.ios() || isMobile.opera() || isMobile.windows())
};

onload:

old way:

isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;

newer way:

isMobile.any() ? document.body.classList.add('is-touch') : null;

The code above will apply the "is-touch" class to the body element if the device has a touch screen. This allows you to handle hover effects in your web application using

body:not(.is-touch) the_rest_of_my_css:hover

For example:

button:hover

becomes:

body:not(.is-touch) button:hover

This method circumvents the need for Modernizr, which can be bulky. If your goal is simply to detect touch screens and minimize the final compiled source size, this approach is ideal.

In my opinion, the most effective approach for styling touch-screen devices using CSS in 2022 is to utilize (pointer:coarse) rather than relying on (hover:none), or a combination of both. It has been observed that (hover:none) can be unreliable as some devices simulate hover behavior through long presses (touch), thus rendering the media query ineffective.

A suggested alternative could be implementing Modernizr or a combination of Modernizr and CSS to address this issue. Utilizing a setup like:

.modernizr-touch-class .my-class { // properties }
@media (pointer:coarse) { .my-class { // same properties } }

However, it is important to note that even with these solutions, reliability may not be guaranteed. Incorporating Modernizr's "Touch Events" test could provide additional insights into potential problems and solutions related to touch-screen compatibility.

Ultimately, it is crucial to acknowledge that (hover:none) may not be a dependable option in 2022. :D

Perfectly functioning on browsers built on Mozilla and Webkit:

/* display only on devices with mouse input */
@media (hover: hover), (-moz-touch-enabled: 0), (pointer:fine) {
    ...
}

/* display only on touch-based devices */
@media (hover: none), (hover: on-demand), (-moz-touch-enabled: 1), (pointer:coarse) {
    ...
}

How to dynamically add a touchscreen class to the body element using JavaScript or jQuery

// Applying mobile-specific CSS
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").addClass("touchscreen");
    }

This problem was successfully fixed by implementing the following solution:

@media (hover:none), (hover:on-demand) { 
Your specific class or ID{
assigned attributes
}    
}

As of May 5th, 2022:

var isTouch = "maxTouchPoints" in window.navigator && window.navigator.maxTouchPoints > 1;
var isTouchTwo = "ontouchstart" in window;
var isTouchThree = window.matchMedia && window.matchMedia("(pointer:coarse)").matches;
var isDesktopIE = !!window.MSInputMethodContext && !!document.documentMode && !isTouchTwo;
var uaDataIsMobile = window.navigator.userAgentData && window.navigator.userAgentData.mobile;
var isDevice = typeof uaDataIsMobile === 'boolean' ? window.navigator.userAgentData.mobile || (isTouchTwo && isTouchThree) : ((/android|avantgo|blackberry|googlebot-mobile|iemobile|opera mini|kitkat|palmos|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|iphone|ipod|phone|ipad|pie|tablet|silk|up\.browser|up\.link|playbook|webos|wos/i.test(window.navigator.userAgent.toLowerCase()) && !isDesktopIE) || window.navigator.platform === 'MacIntel' && isTouch);

console.log('1. '+isTouch+' 2. '+isTouchTwo+' 3. '+isTouchThree+' 4. '+/android|avantgo|blackberry|googlebot-mobile|iemobile|opera mini|kitkat|palmos|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|iphone|ipod|phone|ipad|pie|tablet|silk|up\.browser|up\.link|playbook|webos|wos/i.test(window.navigator.userAgent.toLowerCase())+' 5. isDevice: '+isDevice)

Addresses concerns regarding a) the claim by IE11 desktop navigator.userAgent string to be "tablet", and b) the similarity between iPadOS User Agent in Safari and MacOS Catalina. (Not personally tested, but logical reasoning suggests this.

quote

Visit here for more information.

unquote

This solution is expected to function effectively. My reliance is placed on its performance. (Refer to edit section.)

Take into account that my response aligns with Client Hints. (I believe future responses should adhere to this as well.) For browsers supporting navigator.userAgentData, there will be no necessity for navigator.userAgent.

Apologies for the lengthy code strings. They appear much neater in ES6 format.

To carry out a media query, apply a style sheet based on the output of true or false.

edit: How to identify iPad and iPad OS version in iOS 13 and above?

if (navigator.maxTouchPoints > 1) {
  // browser supports multi-touch
}

I previously thought it was > 0. (Corrected within the code snippet.)

After extensive testing across multiple browsers, I discovered that in order to ensure compatibility, it is necessary to utilize both hover and pointer features -

@media (hover:none), (pointer:coarse){   
  .show_on_touch {display:inline}
}

The statement hover:none indicates lack of hover support, however some browsers may not accurately report this information.

Additionally, pointer:coarse signifies the absence of precise pointer control, suggesting touch-based interaction.