github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-07 01:53:21 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Remove isTablet capability (#30799)

Browse Source 
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
```
This commit is contained in:
Penar Musaraj 2025-01-16 10:19:01 -05:00 committed by GitHub
parent 6c3a7f2a67
commit 1ae35ecce8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 0 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/instance-initializers/sniff-capabilities.js
View File

@ -16,9 +16,5 @@ export default {
if (caps.isIOS) { if (caps.isIOS) {
html.classList.add("ios-device"); html.classList.add("ios-device");
} }
if (caps.isTablet) {
html.classList.add("tablet-device");
}
}, },
}; };

9
app/assets/javascripts/discourse/app/services/capabilities.js
View File

@ -9,15 +9,6 @@ class Capabilities {
isAndroid = ua.includes("Android"); isAndroid = ua.includes("Android");
isWinphone = ua.includes("Windows Phone"); isWinphone = ua.includes("Windows Phone");
isIpadOS = ua.includes("Mac OS") && !/iPhone|iPod/.test(ua) && this.touch; 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; isIOS = (/iPhone|iPod/.test(ua) || this.isIpadOS) && !window.MSStream;
isApple = isApple =
APPLE_NAVIGATOR_PLATFORMS.test(navigator.platform) || APPLE_NAVIGATOR_PLATFORMS.test(navigator.platform) ||