cordova / ios媒體查詢方向從不報告“橫向”

Question

cordova 3.4.0-0.1.3，在模擬器（iOS 7.1 11D167）或物理設備（iOS 7.1.1 11D201）上的行為相同。

我使用了由“ cordova create hello com.example.hello HelloWorld”創建的cordova示例應用程序，並從正文中刪除了背景圖像樣式。 無論以下方向如何，添加以下css都會導致綠色背景：

body {
    /* red */
    background-color:#FF0000;
}

@media screen and (orientation : portrait) {
     body {
        /* green */
        background-color:#00FF00; 
    }
}

@media screen and (orientation : landscape) {
     body {
        /* blue */
        background-color:#0000FF;
    }
}

我想要一種一般測試肖像/風景的方法。 以下工作在ios上，肖像的綠色背景，風景的藍色背景。

body {
    /* red */
    background-color:#FF0000;
}

@media screen and (max-aspect-ratio: 1/1) {
     body {
        /* green */
        background-color:#00FF00;
    }
}

@media screen and (min-aspect-ratio: 1/1) {
     body {
        /* blue */
        background-color:#0000FF;
    }
}

我的定向查詢有問題嗎？ 有什么理由不采用長寬比方法？

shouldAutorotateToInterfaceOrientation應該正確返回“ YES”。 我的plist聲明該應用程序支持所有方向。

謝謝您的幫助。

Answer 1

我認為您還必須為方向指定一個最小寬度：橫向才能正常工作，因為iOS不能正確地檢測到這種情況，只需使用簡單的技巧並尋找當您更改方向時會改變的設備寬度。

@media only screen and (max-width : 320px), (orientation: portrait) {
    /*css goes here*/
 }

@media only screen and (min-width : 320px), (orientation: landscape) {
    /*css goes here*/
}

需要注意的是,工作方式or 。

試試這個，讓我知道，是否有幫助:-)

Answer 2

在這個問題上花了很多時間，部分原因是Google並沒有帶給我最佳答案...我將在這里鏈接： 為什么設備旋轉時我的Cordova / PhoneGap iOS應用程序不旋轉？

最簡單的解決方案：定義window.shouldRotateToOrientation以針對4個“度”值中的任意一個或全部返回true：0和180縱向，-90和90橫向，例如，請參見http://www.williammalone.com/articles/html5-javascript -ios-orientation /用於有用的readDeviceOrientation（盡管它僅在解決基本問題后才起作用）。

在Cordova 5.1.1，iOS 8，iPhone 6上進行了測試。也可以在模擬器中使用。 我想我可以安裝最新的PhoneGap只是為了在那里進行驗證。