Windows Phone 8：CSS方向不被识别

我正尝试在css中的所有移动设备上选取方向，并在方向更改上触发一些css。Windows Phone 8：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浏览器（安卓，IOS），甚至台式机正常工作（巴几个设备），但在新的Windows Phone 8设备中，它并没有采取变化。（诺基亚Lumia 920）

我也有看一些JavaScript资源（我没有JavaScript的奇才虽然）即：

但是，从我可以告诉，这仍然不适用于Windows Phone 8设备？

是否有一个特定的MS CSS代码，我需要使用还是有另一种方式来做到这一点？如果有跨浏览器/跨移动设备的JavaScript片段可以接受更改，并且只需将变体添加到主体标签，那就太棒了。

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

来源

2012-12-03 Arathol

作为一个测试，你可以添加一段JavaScript，只是做'警报（window.orientation）;'来看看景观和方向之间是否有区别。但它忽视媒体查询的事实是令人讨厌的。 –

它绝对是。我确实发现了一些关于媒体查询的其他信息，看起来8号窗口支持： '@media（-ms-view-state：fullscreen-landscape）' '@media（-ms-view-state：filled）' 不知道它是否只适用于使用JS和CSS构建的地铁应用程序，或者如果它的内容也适用于普通网站。也不知道如果Windows Phone 8支持这一点。现在仍在测试。 – Arathol

好吧，很显然，我前面提到的那些“ms-view-state”媒体查询仅适用于Windows 8应用程序。 – Arathol

@media all and (orientation:landscape)绝对是您应该采取的正确方向。有关WP8和HTML的build2012讨论会有现场演示。见时间戳35：30〜关于WP8 IE10取向的变化@http://channel9.msdn.com/Events/Build/2012/2-015

来源

2012-12-03 21:19:00 JustinAngel

谢谢@justinAngel。只要我手中拿着实际的电话设备进行测试，我会尽快查看。我从您的代码中注意到的一件事是您针对媒体查询定位了“全部”，而我只针对“屏幕”。使用“屏幕”的Windows手机真的不会拿起媒体查询？奇怪。我会让你知道我找到了什么，然后回过头来回答这个问题。谢谢！ – Arathol

嗨@JustinAngel。我可以证实，这绝对不适用于诺基亚Lumia 920（据推测IE10）。我在这里建立了一个快速测试页面http://goo.gl/OxPmQ。如果除我以外的人可以使用新的Windows Phone 8设备进行测试，并告诉我他们是否能够正常工作。（必须是与IE10的Windows Phone 8 - 与IE9的较旧的Windows Phone 8完美工作 - 即与操作系统升级的HTC HD7） – Arathol

我认为这是正确的，因为我发布的错误似乎是由于某种原因的开发服务器问题。我在Visual Studio中构建项目，在IIS中发布到本地计算机，然后使用移动设备访问该站点进行测试。所有的移动设备都会选择媒体查询，但windows phone不支持。这就是为什么我不认为这是一个本地化问题。当我们将网站发布到适当的实时测试服务器时，媒体查询在所有设备上都可以正常使用。奇怪，我知道，但另一个问题的另一个时间。 – Arathol

根据这一blog entry，当您查看网页在本地，IE默认为向后兼容模式Intranet站点。这可能是导致它不按预期工作的原因。您可以通过添加以下meta标签解决它：

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

来源

2013-01-07 19:38:26 Milo

感谢Milo，下次试试时，我会试试这个试试！很高兴知道 – Arathol

谢谢，它确实修复了我在诺基亚Lumia 1020邮件客户端上的bug！ – Iggy

虽然这是一个有点老问题的，我有没有被IE11于表面的Pro 2的平板电脑认可的方向同样的问题。它归结为空白。我想我会分享解决方案，以防别人遇到同样的问题。

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

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

来源

2014-06-18 16:07:25

Windows Phone 8：CSS方向不被识别

回答

相关问题