Move browser env into main env (#9718)

src/env/index.ts

@@ -26,5 +26,18 @@ export const IS_IOS: boolean = Platform.OS === 'ios'
 export const IS_ANDROID: boolean = Platform.OS === 'android'
 export const IS_NATIVE: boolean = true
 export const IS_WEB: boolean = false
+
+/**
+ * Web-specific platform detection
+ */
+export const IS_WEB_TOUCH_DEVICE: boolean = true
 export const IS_WEB_MOBILE: boolean = false
 export const IS_WEB_MOBILE_IOS: boolean = false
+export const IS_WEB_MOBILE_ANDROID: boolean = false
+export const IS_WEB_SAFARI: boolean = false
+export const IS_WEB_FIREFOX: boolean = false
+
+/**
+ * Misc
+ */
+export const IS_HIGH_DPI: boolean = true

src/env/index.web.ts

@@ -21,8 +21,29 @@ export const IS_IOS: boolean = false
 export const IS_ANDROID: boolean = false
 export const IS_NATIVE: boolean = false
 export const IS_WEB: boolean = true
-// @ts-ignore we know window exists -prf
-export const IS_WEB_MOBILE: boolean = global.window.matchMedia(
+
+/**
+ * Web-specific platform detection
+ */
+export const IS_WEB_TOUCH_DEVICE =
+  window.matchMedia('(pointer: coarse)').matches
+export const IS_WEB_MOBILE: boolean = window.matchMedia(
   'only screen and (max-width: 1300px)',
 )?.matches
 export const IS_WEB_MOBILE_IOS: boolean = /iPhone/.test(navigator.userAgent)
+export const IS_WEB_MOBILE_ANDROID: boolean =
+  /android/i.test(navigator.userAgent) && IS_WEB_TOUCH_DEVICE
+export const IS_WEB_SAFARI: boolean = /^((?!chrome|android).)*safari/i.test(
+  // https://stackoverflow.com/questions/7944460/detect-safari-browser
+  navigator.userAgent,
+)
+export const IS_WEB_FIREFOX: boolean = /firefox|fxios/i.test(
+  navigator.userAgent,
+)
+
+/**
+ * Misc
+ */
+export const IS_HIGH_DPI: boolean = window.matchMedia(
+  '(min-resolution: 2dppx)',
+).matches