3

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

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

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

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

4

3 回答 3

2

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

于 2012-12-03T21:19:00.427 回答
1

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

<meta http-equiv="x-ua-compatible" content="IE=edge" />
于 2013-01-07T19:38:26.930 回答
1

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

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

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

于 2014-06-18T16:07:25.363 回答