Detecting Orientation of Windows Phone

Question

I'm using the JavaScript event onorientationchange and the parameter window.orientation to detect orientation changes and orientation values on my website. This works well with an iPhone and an Android. But a Windows Phone doesn't fire the onorientationchange event and window.orientation is undefined. How I detect orientation changes of Windows Phones?

Thanks, Konrad

The tags iphone android and mobilen isnt correct please edit that tags — Aracem, Sep 02 '11 at 07:52

score 4 · Accepted Answer · answered Sep 02 '11 at 11:42

4

IE9Mobile doesn't support these events.

If your page is being displayed inside a WebBrowser control within a (silverlight) app then you can detect the orientation change at app level and then invoke scripts on the page to pass this information.

If you're just running in the browser then there is no way to detect orientation changes.

answered Sep 02 '11 at 11:42

Matt Lacey

65,560
11
91
143

Ok thank you. I also find out, that IE9Mobile doesn't support different basic JavaScript functions like document.getElementById – Konrad Sep 05 '11 at 06:35

score 3 · Answer 2 · answered Sep 13 '11 at 12:40

3

In CSS3 (works well with Mango, I don't know if in classic IE9 Mobile, but probably):

@media screen and (max-width: 480px)
{
/* CSS for Orientation Vertical */
}
@media screen and (min-width: 481px)
{
/* CSS for Orientation Horizontal */
}

Let me know if it worked!

answered Sep 13 '11 at 12:40

Zozo

870
1
8
27

Haven't Mango on my phone so far. But it's my hope that all stuff working with iPhones and Androids already will work with WinPhones then. Since I perform some other JS-tasks on rotation, I hope that there will be also new features in Mango's IE beside CSS3. – Konrad Sep 15 '11 at 06:35

score 0 · Answer 3 · edited May 23 '17 at 12:29

The CSS change is perhaps the best way to detect orientation changes but, if you're like me, and just need a quick and dirty way to find out the current orientation then this'll do the job.

var isLandscape = $(window).width() > $(window).height();

For what it's worth, it seems like the implementation of window.orientation differs on certain platforms so you may need to check what device is being used.

Detecting Orientation of Windows Phone

3 Answers3

Linked