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），即：

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

我需要使用特定的MS css代码，还是有其他方法可以使用？如果有一个跨浏览器/跨移动设备的javascript可以接收更改并且只是在更改的body标签上添加一个类，那就太棒了。

非常感谢任何帮助。谢谢！

Answer 1

@media all and (orientation:landscape)绝对是您应该采取的正确方向。 WP8和HTML的build2012讲座中有一个现场演示。有关WP8 IE10 @ http://channel9.msdn.com/Events/Build/2012/2-015

的方向更改，请参阅时间戳35：30

Answer 2

根据此blog entry，当您在本地查看网页时，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) {

Windows Phone 8：无法识别CSS方向

3 个答案: