mirror of
https://github.com/discourse/discourse.git
synced 2025-05-29 20:29:33 +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:
@ -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) ||
|
||||
|
Reference in New Issue
Block a user