diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts index 2b1424f7b1..70addb0ed8 100644 --- a/packages/common/src/constants.ts +++ b/packages/common/src/constants.ts @@ -18,22 +18,19 @@ export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1; export const isSafari = !isChrome && navigator.userAgent.indexOf("Safari") !== -1; export const isIOS = - /iPad|iPhone/.test(navigator.platform) || + /iPad|iPhone/i.test(navigator.platform) || // iPadOS 13+ (navigator.userAgent.includes("Mac") && "ontouchend" in document); // keeping function so it can be mocked in test export const isBrave = () => (navigator as any).brave?.isBrave?.name === "isBrave"; -// Mobile user agent detection -export const isMobileUA = - /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test( +export const isMobile = + isIOS || + /android|webos|ipod|blackberry|iemobile|opera mini/i.test( navigator.userAgent.toLowerCase(), - ); - -// Mobile platform detection -export const isMobilePlatform = - /android|ios|iphone|ipad|ipod|blackberry|windows phone/i.test( + ) || + /android|ios|ipod|blackberry|windows phone/i.test( navigator.platform.toLowerCase(), ); diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 25fe554967..d3931636dc 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -100,8 +100,7 @@ import { randomInteger, CLASSES, Emitter, - isMobileUA, - isMobilePlatform, + isMobile, } from "@excalidraw/common"; import { @@ -2389,16 +2388,11 @@ class App extends React.Component { }; private isMobileOrTablet = (): boolean => { - // Touch + pointer accuracy const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0; const hasCoarsePointer = window.matchMedia("(pointer: coarse)").matches; const isTouchMobile = hasTouch && hasCoarsePointer; - // At least two indicators should be true - const indicators = [isMobileUA, isTouchMobile, isMobilePlatform]; - const hasMultipleIndicators = indicators.filter(Boolean).length >= 2; - - return hasMultipleIndicators; + return isMobile || isTouchMobile; }; private isMobileBreakpoint = (width: number, height: number) => {