我正在尝试在CSS中所有移动设备上获取方向,并在方向更改上触发一些CSS.

这是对代码的简单测试：

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

CSS是：

     .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;}
    }

现在,在所有的Webkit浏览器(Android,iOS)甚至台式机中,它都可以正常工作(仅在几个设备上运行),但是在新的Windows Phone 8设备中,它无法进行更改. (诺基亚lumia 920)

我也看了一些javascript资源(虽然我不是javascript wiz),即：

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

但是据我所知,这仍然不适用于Windows Phone 8设备吗？

我需要使用特定的MS CSS代码吗？还是有另一种方法可以使用？如果有一个具有跨浏览器/跨移动设备功能的javascript片段可以接管更改并在更改上向body标签添加一个类,那就太好了.

任何帮助将不胜感激.
谢谢！

解决方法:

@media all和(orientation：landscape)绝对是您应该采取的正确方向.关于WP8和HTML的build2012演讲中有一个现场演示.参见时间戳35：30〜以了解WP8 IE10 @ http://channel9.msdn.com/Events/Build/2012/2-015上的方向更改