Windows Phone 8：无法识别 CSS 方向答案

【问题标题】：Windows Phone 8: CSS orientation not recognizedWindows Phone 8：无法识别 CSS 方向
【发布时间】：2014-06-19 00:07:25
【问题描述】：

我正在尝试在 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 专家），即：

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

我需要使用特定的 MS css 代码还是有其他方法可以做到这一点？如果有一个支持跨浏览器/跨移动设备的 javascript 片段可以接收更改并在更改时向 body 标记添加一个类，那就太好了。

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

【问题讨论】：

作为测试，您可以添加一段 javascript 并执行 alert(window.orientation); 以查看横向和方向之间是否有任何区别。但它忽略媒体查询的事实非常烦人。
绝对是。我确实找到了有关媒体查询的其他一些信息，似乎窗口 8 支持这一点：'@media (-ms-view-state: fullscreen-landscape)''@media (-ms-view-state:filled)''@ media (-ms-view-state: snapped)' '@media (-ms-view-state: fullscreen-portrait)' 不确定它是否仅适用于使用 JS 和 CSS 构建的 Metro 应用程序，或者是否也适用于普通网站。也不确定windows Phone 8是否支持这个。现在仍在测试中。
好的，显然我之前提到的那些“ms-view-state”媒体查询似乎只适用于 Windows 8 应用程序。

标签： javascript css orientation media-queries windows-phone-8

【解决方案1】：

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

【讨论】：

谢谢@justinAngel。一旦我手中有实际的电话设备进行测试，我就会看看它。我从您的代码中注意到的一件事是您针对媒体查询的目标是“全部”，而我只针对“屏幕”。 windows phone 真的不会使用“screen”来获取媒体查询吗？奇怪的。我会让你知道我发现了什么，然后回来回答这个问题。谢谢！
嗨@JustinAngel。我可以确认这绝对不适用于诺基亚 lumia 920（据说是 IE10）。我在这里设置了一个快速测试页面goo.gl/OxPmQ。如果我以外的其他人可以使用新的 windows phone 8 设备对此进行测试，并让我知道他们是否发现它工作正常。（必须是带有 IE10 的 windows phone 8 - 带有 IE9 的旧版 windows phone 8 可以完美运行 - 即升级操作系统的 HTC HD7）
我将其标记为正确，因为我发布的错误由于某种原因似乎是开发服务器问题。我在 Visual Studio 中构建项目，在 IIS 中发布到我的本地机器，然后使用移动设备访问该站点进行测试。所有的移动设备都接收媒体查询，但 windows phone 没有。这就是为什么我不认为这是一个本地化的问题。当我们将站点发布到适当的实时测试服务器时，媒体查询在所有设备上都很好。我知道很奇怪，但另一个问题是另一个问题。

【解决方案2】：

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

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

【讨论】：

谢谢 Milo，下次我在做这件事时我会试一试！很高兴知道
谢谢，它确实修复了我在 nokia lumia 1020 邮件客户端上的错误！

【解决方案3】：

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

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

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

【讨论】：