How to get current screen orientation in iOS Safari?

Question

I am trying to get the current screen orientation of iOS however my function which work on chrome dev tool emulator and desktop but it doesn't work on iOS.

Here is my function:

export type ScreenOrientation = "landscape" | "portrait";

export function getScreenOrientation(): ScreenOrientation
{
  if (window.screen.availHeight > window.screen.availWidth)
    return "portrait";
  else
    return "landscape";
}

and here is how my program rougthly do to detect the screen orientation change and to use the function:

  import { getScreenOrientation } from "../../Utils/getOrientation";
  const shoWPortraitModeError = getScreenOrientation() == "landscape" ? false : true;
  window.onorientationchange = function () {
    const newState = getScreenOrientation() == "landscape" ? false : true;
    console.log("window.onorientationchange: ", newState)
    shoWPortraitModeError  = newState;
  };

I tried using window.screen.height and window.screen.width however it didn't worked. Here is the function:

export type ScreenOrientation = "landscape" | "portrait";

export function getScreenOrientation(): ScreenOrientation
{
  if (window.screen.availHeight > window.screen.availWidth)
    return "portrait";
  else
    return "landscape";
}

I launch the iOS safari debugger on a mac vm and I noticed that the window.screen value doesn't changes when I turn the screen:

It made me wonder what are the different property I can use to detect the screen orientation on ios ?

Answer 1

After digging around in the intelisense of the dev console of the safari debugger, I found that you can use window.innerHeight and window.innerWidth properties to detect the screen orienation.

Here is how you can use the function:

export type ScreenOrientation = "landscape" | "portrait";

export function getScreenOrientation(): ScreenOrientation
{
  if (window.innerHeight > window.innerWidth)
    return "portrait";
  else
    return "landscape";
}