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