Add tablet detection

src/lib/hooks/useWebMediaQueries.tsx

@@ -1,5 +1,5 @@
 import {useMediaQuery} from 'react-responsive'
-import {isNative} from 'platform/detection'
+import {isNative, isNativeTablet} from 'platform/detection'
 
 export function useWebMediaQueries() {
   const isDesktop = useMediaQuery({minWidth: 1300})
@@ -7,6 +7,15 @@ export function useWebMediaQueries() {
   const isMobile = useMediaQuery({maxWidth: 800})
   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,

src/platform/detection.ts

@@ -5,6 +5,7 @@ import {dedupArray} from 'lib/functions'
 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)'