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手機中，8個設備並沒有獲得更改。 （諾基亞lumia 920）

我也看了一些javascript資源（我不是javascript wiz），即：

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

但據我所知，這仍然不適用於Windows Phone 8設備？

我需要使用特定的MS css代碼還是有其他方法可以實現？ 如果有一個跨瀏覽器/跨移動設備的javascript可以接收更改並且只是在更改的body標簽上添加一個類，那將會很棒。

任何幫助將不勝感激。 謝謝！

Answer 1

@media all and (orientation:landscape)絕對是你應該采取的正確方向。 WP8和HTML的build2012講座中有一個現場演示。 請參閱時間戳35：30~以獲取WP8 IE10上的方向更改@ http://channel9.msdn.com/Events/Build/2012/2-015

Answer 2

根據此博客條目 ，當您在本地查看網頁時，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) {