CODEWITHSUNDEEP
javascriptiostypescriptmobile-safari
The epic face 007
The epic face 007

Reputation: 629

How to get current screen orientation in iOS Safari?

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: thing i noticed

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

Upvotes: 3

Views: 9328

Answers (5)

VinceCYLiao
VinceCYLiao

Reputation: 131

You can use window.matchMedia

   const landscapeQuery = window.matchMedia('(orientation: landscape)');

   function handleOrientationChange(mediaQuery) {
     if (mediaQuery.matches) {
       console.log('Device is in landscape mode');
     } else {
       console.log('Device is in portrait mode');
     }
   }

   landscapeQuery.addEventListener("change", handleOrientationChange);

Upvotes: 0

Tammy Shipps
Tammy Shipps

Reputation: 945

I'm currently (early 2023) using this little line that returns the angle of the orientation which I can interpret myself:

let orientation = (screen.orientation.angle || window.orientation);

A value other than 0 means it is not portrait, and 90 means reverse portrait.

Upvotes: 1

Josh Hibschman
Josh Hibschman

Reputation: 3714

Despite being deprecated, this works on iOS 16 Safari (late 2022):

// rotate right
window.orientation // -90

// rotate left
window.orientation // 90

Upvotes: 2

Pitis
Pitis

Reputation: 193

If you want to do some CSS, you can use media queries.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

Basically you can use @media (orientation: landscape) {}

If you want it in JS, for other purposes, you can use:

let orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  console.log("Mmmh... you should rotate your device to landscape");
} else if (orientation === undefined) {
  console.log("The orientation API isn't supported in this browser :(");
}

Upvotes: 2

The epic face 007
The epic face 007

Reputation: 629

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";
}

Upvotes: 7

Related Questions