Windows Phone 8：无法识别CSS方向

Question

我试图在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手机中，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标签上添加一个类，那将会很棒。

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

Answer 1

@media all and (orientation:landscape)绝对是你应该采取的正确方向。 WP8和HTML的build2012讲座中有一个现场演示。 请参阅时间戳35：30~以获取WP8 IE10上的方向更改@ http://channel9.msdn.com/Events/Build/2012/2-015

Answer 2

根据此博客条目 ，当您在本地查看网页时，IE默认为内部网站点的向后兼容模式。 这可能是因为它无法按预期工作。 您可以通过添加以下元标记来修复它：

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

Answer 3

虽然这是一个古老的问题，但我有同样的问题，在Surface Pro 2平板电脑上IE11无法识别方向。 它归结为空白。 我以为我会分享解决方案以防其他人遇到同样的问题。

不起作用：
@media all and (orientation : portrait) {

作品：
@media all and (orientation:portrait) {