cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X

Get orientation of mobile device

mn1
13-Aquamarine
13-Aquamarine

Get orientation of mobile device

Hello,

Is there a possibility to get the orientation of the mobile device? I would like to adapt the size of the pictures and buttons dependign on the orientation of the mobile. Is there any event sended if the orientation ist changed?

Thanks for help!

1 ACCEPTED SOLUTION

Accepted Solutions
mn1
13-Aquamarine
13-Aquamarine
(To:sdidier)

Thanks for your help, again.

Now I have the problem that screenorientation is always landscape-primary. I tested it in chrome with the preview function and changed the orientation by clicking the change orientation button at the top of the preview site. Every time I change the orientation a changeorientation event is released, but it always says landscape. Is this function not possible at the preview?

Greetings

View solution in original post

6 REPLIES 6
sdidier
17-Peridot
(To:mn1)

Hello,

 

I have found various ways to do that :

  1. In CSS. More details here https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
  2. In Javascript with various method

 

I have tried the second one with the orientation object.

Please read this documentation :

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

 

As we can read, it is not supported in Safari web browser for iOS.

 

In a new Project, in 2D canevas, I have added one Button and one Label named label-Result.

In home.js, I have created this function very similar to the one provided in documentation above.

 

$scope.screenOrientation = function()
{
  var orientation = screen.msOrientation || (screen.orientation || screen.mozOrientation || {}).type;

  if (orientation === "landscape-primary" || orientation === "landscape-secondary")
  {
    $scope.setWidgetProp("label-Result", "text", "landscape");
    console.log("landscape");
  }
  else if (orientation === "portrait-primary" || orientation === "portrait-secondary")
  {
    $scope.setWidgetProp("label-Result", "text", "portrait");
    console.log("portrait");
  }
  else if (orientation === undefined)
  {
    $scope.setWidgetProp("label-Result", "text", "The orientation API isn't supported in this browser");
    console.log("The orientation API isn't supported in this browser :("); 
  }
}

Tests done :

  1.   In Preview, in Chrome web browser, in my workstation in Windows when clicking the button, result is always landscape
  2. In my Samsung S7, in Vuforia View when clicking the button, result is always portrait. Vuforia View doesn't change screen position and rotating the mobile
  3. In iPad, in Vuforia View when clicking the button, result is The orientation API isn't supported in this browser. Vuforia View screen is changing when rotating tablet

So, to go deeper, we can see this thread in stackoverflow.com :

https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad

 

Best regards,

Samuel

 

mn1
13-Aquamarine
13-Aquamarine
(To:sdidier)

Thanks for help. Do you know, how to catch the event orientationchange, too?

sdidier
17-Peridot
(To:mn1)

Hello,

 

I have improved my demo.

Now, it works fine in Chrome and iOS about portait and landscape.

 

About the event orientationChange, we can found details here :

https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange

http://www.williammalone.com/articles/html5-javascript-ios-orientation/

 

I have checked various syntaxes but when testing in iPad, all of them didn't work...

 

Code updated :

$scope.screenOrientation = function()
{
  var orientation = screen.msOrientation || (screen.orientation || screen.mozOrientation || {}).type;

  if (orientation === "landscape-primary" || orientation === "landscape-secondary")
  {
    $scope.setWidgetProp("label-Result", "text", "landscape");
    console.log("landscape");
  
  	// Chrome
  	$scope.setWidgetProp("label-angle", "text", screen.orientation.angle);
    console.log("the orientation of the device is now " + screen.orientation.angle);
  }
  else if (orientation === "portrait-primary" || orientation === "portrait-secondary")
  {
    $scope.setWidgetProp("label-Result", "text", "portrait");
    console.log("portrait");
    
  	// Chrome
  	$scope.setWidgetProp("label-angle", "text", screen.orientation.angle);
    console.log("the orientation of the device is now " + screen.orientation.angle);    
  }
  else if (orientation === undefined)
  {
    $scope.setWidgetProp("label-Result", "text", "The orientation API isn't supported in this browser");
    console.log("The orientation API isn't supported in this browser :("); 
    
  	// iOS
  	$scope.setWidgetProp("label-angle", "text", window.orientation);
    console.log("the orientation of the device is now " + window.orientation);      
    
    if (Math.abs(window.orientation) === 90)
    {
        // Landscape
    	$scope.setWidgetProp("label-Result", "text", "landscape");
    	console.log("landscape");
    } 
    else 
    {
    	// Portrait
    	$scope.setWidgetProp("label-Result", "text", "portrait");
   		console.log("portrait");
    }
  }
}

// Note that "orientationchange" and screen.orientation are unpre fixed in the following
// code although this API is still vendor-prefixed browsers implementing it.
/*
window.addEventListener('orientationchange', $scope.screenOrientation);
window.onorientationchange = $scope.screenOrientation;
window.addEventListener('onorientationchange', $scope.screenOrientation);
*/

// Listen for resize changes
window.addEventListener("resize", function() {
	$scope.screenOrientation();
}, false);

 

To be honest, I am sure to understand why this event doesn't work in iOS.

It seems a limitation in Vuforia View.

 

Best regards,

Samuel

 

mn1
13-Aquamarine
13-Aquamarine
(To:sdidier)

Thanks for your help, again.

Now I have the problem that screenorientation is always landscape-primary. I tested it in chrome with the preview function and changed the orientation by clicking the change orientation button at the top of the preview site. Every time I change the orientation a changeorientation event is released, but it always says landscape. Is this function not possible at the preview?

Greetings

sdidier
17-Peridot
(To:mn1)

Hello,

 

I have the same problem in Preview in Chrome.

 

To avoid that, i have followed these steps :

  1. In Preview, on keyboard, press F12 key
  2. In Developper Tools, click the Toggle device toolbar iconChrome_toggle_device_toolbar.png
  3. Choose a device
  4. On the right, change height and width
  5. Orientation is modified

Best regards,

Samuel

sdidier
17-Peridot
(To:sdidier)

Hello,

 

I have found why it is not working in Android.

I have disabled Rotation auto in Settings.

 

By enabling it, it works as like a charm.

 

Best regards,

Samuel

Top Tags