improve mobile dection

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(),
   );
 

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<AppProps, AppState> {
   };
 
   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) => {