Detect Screen orientation
Jun 07, 2015
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
Works like a charm on my nexus 5. Impressive Phil!
It works for me on both iPad and Galaxy S5 with Android 5.0.
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.
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.
That looks good Tom, how do you change the version? Is it two different courses?
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.
Nice idea, would work well for phones
This post was removed by a moderator
Very nice Tom! Can you share the .story file?
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.
You would just need to reverse the logic of the triggers so the layer shows on portrait instead of landscape
This post was removed by the author
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.
I haven't visited this for a while, I would probably use jQuery next time
http://demos.jquerymobile.com/1.0a2/#docs/api/events.html
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.
Also,i couldn't get this part "window.innerheight and width and then did some simple maths" How do i use it in JavaScript trigger?
This discussion is closed. You can start a new discussion or contact Articulate Support.