DEV: Use media query for capabilities.touch (#32620)

davidtaylorhq · web-flow · commit ad5e02a85f9f · 2025-05-08T13:23:02.000+01:00
This will allow us to have perfect consistency with CSS-based touch
detection
diff --git a/app/assets/javascripts/discourse/app/services/capabilities.js b/app/assets/javascripts/discourse/app/services/capabilities.js
@@ -14,9 +14,9 @@ const breakpointQueries = {
   "2xl": new TrackedMediaQuery("(min-width: 96rem)"),
 };
 
-class Capabilities {
-  touch = navigator.maxTouchPoints > 1 || "ontouchstart" in window;
+const anyPointerCourseQuery = new TrackedMediaQuery("(any-pointer: coarse)");
 
+class Capabilities {
   isAndroid = ua.includes("Android");
   isWinphone = ua.includes("Windows Phone");
   isIpadOS = ua.includes("Mac OS") && !/iPhone|iPod/.test(ua) && this.touch;
@@ -66,6 +66,10 @@ class Capabilities {
     },
   };
 
+  get touch() {
+    return anyPointerCourseQuery.matches;
+  }
+
   get userHasBeenActive() {
     return (
       !("userActivation" in navigator) || navigator.userActivation.hasBeenActive
