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 = export const isSafari =
!isChrome && navigator.userAgent.indexOf("Safari") !== -1; !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
export const isIOS = export const isIOS =
/iPad|iPhone/.test(navigator.platform) || /iPad|iPhone/i.test(navigator.platform) ||
// iPadOS 13+ // iPadOS 13+
(navigator.userAgent.includes("Mac") && "ontouchend" in document); (navigator.userAgent.includes("Mac") && "ontouchend" in document);
// keeping function so it can be mocked in test // keeping function so it can be mocked in test
export const isBrave = () => export const isBrave = () =>
(navigator as any).brave?.isBrave?.name === "isBrave"; (navigator as any).brave?.isBrave?.name === "isBrave";
// Mobile user agent detection export const isMobile =
export const isMobileUA = isIOS ||
/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test( /android|webos|ipod|blackberry|iemobile|opera mini/i.test(
navigator.userAgent.toLowerCase(), navigator.userAgent.toLowerCase(),
); ) ||
/android|ios|ipod|blackberry|windows phone/i.test(
// Mobile platform detection
export const isMobilePlatform =
/android|ios|iphone|ipad|ipod|blackberry|windows phone/i.test(
navigator.platform.toLowerCase(), navigator.platform.toLowerCase(),
); );

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

@ -100,8 +100,7 @@ import {
randomInteger, randomInteger,
CLASSES, CLASSES,
Emitter, Emitter,
isMobileUA, isMobile,
isMobilePlatform,
} from "@excalidraw/common"; } from "@excalidraw/common";
import { import {
@ -2389,16 +2388,11 @@ class App extends React.Component<AppProps, AppState> {
}; };
private isMobileOrTablet = (): boolean => { private isMobileOrTablet = (): boolean => {
// Touch + pointer accuracy
const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0; const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
const hasCoarsePointer = window.matchMedia("(pointer: coarse)").matches; const hasCoarsePointer = window.matchMedia("(pointer: coarse)").matches;
const isTouchMobile = hasTouch && hasCoarsePointer; const isTouchMobile = hasTouch && hasCoarsePointer;
// At least two indicators should be true return isMobile || isTouchMobile;
const indicators = [isMobileUA, isTouchMobile, isMobilePlatform];
const hasMultipleIndicators = indicators.filter(Boolean).length >= 2;
return hasMultipleIndicators;
}; };
private isMobileBreakpoint = (width: number, height: number) => { private isMobileBreakpoint = (width: number, height: number) => {