Windows Phone 8: CSS orientation not recognized

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:

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!

Answers:

Answer

@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

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

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) {

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.