Detect Screen orientation

A client set me a challenge to determine if a Mobile device was portrait or landscape.

I thought this would be easy (20 minutes) but took me a couple of hours.

here is a test link http://www.test.elearninglaboratory.co.uk/Test/story.html

and I have attached the file, tested on iOS and Android (Nexus).

The problem I had was that I first tried window.orientation and then found out Samsung devices give different values compared to iOS and Nexus.  So my next plan was  screen.height and width but the iOS devices give the same value whatever the orientation.

Finally I did window.innerheight and width and then did some simple maths, a bit of a kludge and may not work on some devices.  if someone has a simpler solution let me know (please).

16 Replies
Tom Kuhlmann

Cool. Here's a demo I was messing with the other day. It doesn't detect screen orientation but it does change the demo based on smart phone or not.

http://articulate-heroes-authoring.s3.amazonaws.com/Tom/mobile/pub3/story.html

Open on a tablet/laptop versus on a smart phone. See what happens. Was actually pretty easy to do.

Michael Hinze
Tom Kuhlmann

Cool. Here's a demo I was messing with the other day. It doesn't detect screen orientation but it does change the demo based on smart phone or not.

http://articulate-heroes-authoring.s3.amazonaws.com/Tom/mobile/pub3/story.html

Open on a tablet/laptop versus on a smart phone. See what happens. Was actually pretty easy to do.

For me, this link opens in the AMP on both iPad and Android. I don't see anything different from a 'normal' HTML5-published project that runs in AMP. Am I missing something?

Michael Hinze
Tom Kuhlmann

Yeah, it should open in AMP if you have installed. However, if you open on an iPhone (for example) you should get something different since it will look for the HTML5 version. 

 

On the Android you tested, was that a tablet or smart phone?

Ah, I get it now. I tested on a Samsung Galaxy S5 phone.

Tom Kuhlmann

Yeah, I created a portrait version of the course first (made sure all objects were set to maintain aspect ratio), then changed story size to a landscape version. This required a little tweaking of the layouts but for the most part was very quick to do.

Then I added a smart phone version of the course in the folder and modified the story.html to load it.

Timothy  Davis
Phil Mayor

Finally I did window.innerheight and width and then did some simple maths, a bit of a kludge and may not work on some devices.  if someone has a simpler solution let me know (please).

Can you elaborate a little on this please? The .story file you attached uses the screen.height and screen.width properties. I'm working on a project where it is preferred that the learner stay in landscape orientation, but I cannot get the layer to display while it is in portrait, but not landscape. 

Abhishek Roy

Phil - I tested it on Android and iOS device.

a) Android : Alert not displayed when course is opened in portrait mode.

Alert displayed when course is opened in landscape mode. 

which is exactly what it should do.

b) iOS :

On iOS (iphone 6) when the course is viewed in  Landscape mode, it still displays the alert. which it should not.

It displays the alert in Portrait mode which is fine.

Abhishek Roy

can you create a short demo based on this ?

 

i am not a coder. so, don't have any idea how to achieve it in SL

 

Orientation change event

orientationchange
Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an orientation property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.