corkine/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw synced 2025-07-25 13:58:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve mobile dection

Browse Source
This commit is contained in:
dwelle
2025-07-18 12:23:18 +02:00
parent 9b644169ae
commit 69676fb325
2 changed files with 8 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/common/src/constants.ts
View File

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

10
packages/excalidraw/components/App.tsx
View File

@ -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) => {