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 phone 8设备中，它没有改变。(诺基亚lumia 920)

我还看了一些javascript资源(虽然我不是javascript向导)，即：

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

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

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

如有任何帮助，我们将不胜感激。谢谢

Answer 1

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

Answer 2

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

<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) {