mirror of
https://github.com/discourse/discourse.git
synced 2025-02-06 23:20:44 +08:00
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
```
This commit is contained in:
parent
6c3a7f2a67
commit
1ae35ecce8
|
@ -16,9 +16,5 @@ export default {
|
|||
if (caps.isIOS) {
|
||||
html.classList.add("ios-device");
|
||||
}
|
||||
|
||||
if (caps.isTablet) {
|
||||
html.classList.add("tablet-device");
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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) ||
|
||||
|
|
Loading…
Reference in New Issue
Block a user