Get device orientation in mobile browser


I’m currently working on a prototype for a mobile application.
I’m looking for a simple way to get the device orientation when viewing the prototype in a mobile browser.
When viewing in portrait mode, I want to be able to turn the phone to landscape and automatically navigate to an other page.

Found some experimental Javascript to get the raw-values from the gyroscope, but I’m wonder if there is any simpler way. Since in my situation I’m good with a boolean portrait/landscape.

Perhaps something like this:
The “Is Landscape” node is an expression set to width > height.

1 Like

When trying the solution above I get a result like this:

The view is compensation for the landscape mode by always having height > width.

My project settings are following (default):

Do I need to change something here?

Seems like changing the Fill mode to “Fill” can do the trick. This however requires redesigning of the other parts of the project. So if there is any easier solution I would prefer that.

That’s right, I forgot about that, it’ll only work with “Fill”. “Aspect Fit” will always use the specified resolution and won’t allow portrait/landscape transitions.

You can try using fill and change the scale on the root node. Make sure you also set Pivot X and Pivot Y to 0 so it’ll scale from the top right instead of the center.

This seems to get the correct result on refresh for me:

var query = window.matchMedia("(orientation:landscape)");
console.log("Device held " + (query.matches ? “horizontally” : “vertically”));

I think you can wrap it into an event listener. I would also really appreciate if you could share the code if you do that :slight_smile: