Get device orientation in mobile browser


#1

Hi,

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.


#2

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


#3

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?


#4

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.


#5

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.


#6

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: