diff --git a/src/lib/hooks/useWebMediaQueries.tsx b/src/lib/hooks/useWebMediaQueries.tsx index fa9d6ffa64..894cc7dd90 100644 --- a/src/lib/hooks/useWebMediaQueries.tsx +++ b/src/lib/hooks/useWebMediaQueries.tsx @@ -1,6 +1,6 @@ import {useMediaQuery} from 'react-responsive' -import {isNative} from '#/platform/detection' +import {isNative, isNativeTablet} from '#/platform/detection' export function useWebMediaQueries() { const isDesktop = useMediaQuery({minWidth: 1300}) @@ -8,6 +8,15 @@ export function useWebMediaQueries() { const isMobile = useMediaQuery({maxWidth: 800 - 1}) const isTabletOrMobile = isMobile || isTablet const isTabletOrDesktop = isDesktop || isTablet + if (isNativeTablet) { + return { + isMobile: false, + isTablet: true, + isTabletOrMobile: true, + isTabletOrDesktop: true, + isDesktop: false, + } + } if (isNative) { return { isMobile: true, diff --git a/src/platform/detection.ts b/src/platform/detection.ts index dc30c2fd33..845dc7fdd8 100644 --- a/src/platform/detection.ts +++ b/src/platform/detection.ts @@ -3,6 +3,7 @@ import {Platform} from 'react-native' export const isIOS = Platform.OS === 'ios' export const isAndroid = Platform.OS === 'android' export const isNative = isIOS || isAndroid +export const isNativeTablet = Platform.OS === 'ios' && Platform.isPad export const devicePlatform = isIOS ? 'ios' : isAndroid ? 'android' : 'web' export const isWeb = !isNative export const isMobileWebMediaQuery = 'only screen and (max-width: 1300px)'