fix of screen.orientation bug 🪲 (#164)

* Just a quick remainder that you made the world a little better just by being yourself. Also a fix of screen.orientation bug

* Comment about the solution

* Prettier

assets/src/features/shared/hooks/useSmartphoneViewport.tsx

@@ -12,21 +12,27 @@ const useSmartphoneViewport = (): ScreenInfo => {
 
   useEffect(() => {
     if (typeof window !== "undefined") {
+      // The screen.orientation.type is widely available on most of the devices but it was recently added to mobile safari.
+      // Source: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
+      // At the day of writing this comment (May 8th 2023) some web apps like Chrome on iOS does NOT implement this.
+      // The `windows.matchMedia` is used as a fallback for such devices.
+      const isLandscape =
+        screen.orientation?.type.includes("landscape") || window.matchMedia("(orientation: landscape)").matches;
+
       const updateIsSmartphoneState = () => {
         if (!window.visualViewport) return;
 
         const isCoarse = matchMedia("(pointer:coarse)").matches;
         const hasMobileWidth = window.visualViewport.width <= MOBILE_WIDTH_BREAKPOINT;
 
-        const isLandscapedSmartphone =
-          screen.orientation.type.includes("landscape") && window.visualViewport.width <= MAX_MOBILE_WIDTH_BREAKPOINT; // iPhone 12 max  viewpor width
+        const isLandscapedSmartphone = isLandscape && window.visualViewport.width <= MAX_MOBILE_WIDTH_BREAKPOINT; // iPhone 12 max  viewpor width
         setIsSmartphone(isCoarse && (hasMobileWidth || isLandscapedSmartphone));
       };
 
       const updateIsHorizontalOrientationState = () => {
         if (!screen) return;
 
-        setIsHorizontal(screen.orientation.type.includes("landscape"));
+        setIsHorizontal(isLandscape);
       };
 
       const updateState = () => {