Windows Phone 8: CSS orientation not recognized

Question

I am attempting to pick up orientation on all mobile devices in css and trigger some css on the orientation change.

This is a simple test of the code:

    <div class="orientation">
        <span class="landscape">Landscape</span>
        <span class="portrait">Portrait</span>
    </div>

and the CSS is:

     .portrait, .landscape {
         position: absolute;
         top: 0px;
         left: 0px;
     }

    .portrait {display: block;}
    .landscape {display: none;}

    @media screen and (orientation:landscape) {
        .portrait {display: none;}
        .landscape {display: block;}
    }

Now in all webkit browsers (android, ios) and even desktop it works fine (bar a couple of devices) but in the new windows phone 8 devices it doesn't pick up the change. (Nokia lumia 920)

I've also had a look at some javascript resources (I am no javascript wiz though) namely:

• http://www.developria.com/2010/08/detecting-screen-orientation-i.html
• http://davidwalsh.name/orientation-change

But from what i can tell, that still doesn't work for windows phone 8 devices?

Is there a specific MS css code I need to use or is there another way to do it? it would be great if there was a cross browser / cross mobile device capable piece of javascript that can pick up the change and just add a class to the body tag on the change.

Any help would be greatly appreciated. Thanks!

Answer 1

@media all and (orientation:landscape) is definitely the right direction you should take. There's a live demo of that in the build2012 talk on WP8 and HTML. See time stamp 35:30~ for orientation changes on WP8 IE10 @ http://channel9.msdn.com/Events/Build/2012/2-015

Answer 2

According to this blog entry , when you view a web page locally, IE defaults into backwards compatible mode for intranet sites. This is probably what's causing it not to work as intended. You can fix it by adding the following meta tag:

<meta http-equiv="x-ua-compatible" content="IE=edge" />

Answer 3

Although this is a bit of an old question, I had this same issue with orientation not being recognized by IE11 on a Surface Pro 2 tablet. It came down to whitespace. I thought I'd share the solution in case someone else has the same issue.

Doesn't work:
@media all and (orientation : portrait) {

Works:
@media all and (orientation:portrait) {