From 1ae35ecce8e70da065906a56171dbaa171bf2bfe Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Thu, 16 Jan 2025 10:19:01 -0500 Subject: [PATCH] DEV: Remove isTablet capability (#30799) Reverts 02113fc. This is an imperfect detection of tablets and more generally, we want to move away from detecting specific devices. THere's a broader effort to remove mobile/desktop detection and rely instead on viewport-width-based patterns and feature detection (touch, hover, etc.). See https://github.com/discourse/discourse/pull/30642 To reach the same results in CSS/jS, we can use the `touch` and `hover` media queries. In CSS, something like: ``` @media (hover: none) { // hover non excludes touchscreen desktops .discourse-touch { // we detect touch capability on the JS side, a bit of a belts and suspenders approach } } ``` And in JS: ``` this.capabilities.touch` plus `window.matchMedia("(hover: none)").matches ``` --- .../app/instance-initializers/sniff-capabilities.js | 4 ---- .../javascripts/discourse/app/services/capabilities.js | 9 --------- 2 files changed, 13 deletions(-) diff --git a/app/assets/javascripts/discourse/app/instance-initializers/sniff-capabilities.js b/app/assets/javascripts/discourse/app/instance-initializers/sniff-capabilities.js index 254ebc3d60a..a72b3edf935 100644 --- a/app/assets/javascripts/discourse/app/instance-initializers/sniff-capabilities.js +++ b/app/assets/javascripts/discourse/app/instance-initializers/sniff-capabilities.js @@ -16,9 +16,5 @@ export default { if (caps.isIOS) { html.classList.add("ios-device"); } - - if (caps.isTablet) { - html.classList.add("tablet-device"); - } }, }; diff --git a/app/assets/javascripts/discourse/app/services/capabilities.js b/app/assets/javascripts/discourse/app/services/capabilities.js index 5564628b70c..109c2001e57 100644 --- a/app/assets/javascripts/discourse/app/services/capabilities.js +++ b/app/assets/javascripts/discourse/app/services/capabilities.js @@ -9,15 +9,6 @@ class Capabilities { isAndroid = ua.includes("Android"); isWinphone = ua.includes("Windows Phone"); isIpadOS = ua.includes("Mac OS") && !/iPhone|iPod/.test(ua) && this.touch; - isTabletScreen = - this.touch && - ((window.innerWidth >= 600 && window.innerWidth <= 1280) || - (window.innerHeight >= 600 && window.innerHeight <= 1280)); - isTablet = - this.isTabletScreen || - this.isIpadOS || - /iPad|Android(?!.*Mobile)|Tablet/.test(ua); - isIOS = (/iPhone|iPod/.test(ua) || this.isIpadOS) && !window.MSStream; isApple = APPLE_NAVIGATOR_PLATFORMS.test(navigator.platform) ||