Skip to main content
M
mn11-Visitor
1-Visitor
February 14, 2019
Solved

Get orientation of mobile device

  • February 14, 2019
  • 1 reply
  • 4310 views

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!

Best answer by mn1

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

1 reply

S
sdidier17-Peridot
17-Peridot
February 14, 2019

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

 

M
mn11-VisitorAuthor
1-Visitor
February 14, 2019

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

S
sdidier17-Peridot
17-Peridot
February 14, 2019

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

 

Terms & ConditionsCookie settingsAccessibility statement