Windows Phone 8: CSS orientation not recognized

3
votes

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!

3
javascriptcssorientationmedia-querieswindows-phone-8
As a test, you could add a piece of javascript and just do alert(window.orientation); to see if there's any difference between landscape and orientation. But the fact that it ignores the media queries is mighty annoying. – Christian
It most definitely is. I did find some other info regarding the media queries and it seems window 8 supports this: '@media (-ms-view-state: fullscreen-landscape)' '@media (-ms-view-state: filled)' '@media (-ms-view-state: snapped)' '@media (-ms-view-state: fullscreen-portrait)' Not sure if its just for metro app built using JS and CSS or if its also for normal sites. Also not sure if windows Phone 8 supports this. still testing now. – Arathol
OK, so apparently those "ms-view-state" media queries I mentioned earlier are only for the windows 8 apps it seems. – Arathol

3 Answers

2
votes

@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

1
votes

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" />
1
votes

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