瀏覽器的媒體查詢問題

Question

我想根據寬高比加載不同的背景圖片。 我正在使用LESS CSS。 問題是，我根本沒有任何背景圖像，也無法弄清問題。

（我知道目前的CSS是胡說八道。我試圖簡單地編入代碼以使其正常工作，但我做不到）

這是帶有媒體查詢的LESS CSS部分：

#page_back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height:100%;
     overflow: hidden;
     z-index: 1;
     background-repeat: no-repeat;
     background-size: 100% auto;

     @media all and (min-aspect-ratio: 1/1) {
         background-image: url(../../images/front.jpg);
     }
     @media all and (max-aspect-ratio: 1/1) {
         background-image: url(../../images/front.jpg);
     }
 }

我剛剛發現編譯結果是：

@media all and (min-aspect-ratio: 1) {
  main #page_back { background-image:url(../../images/front.jpg); }
}
@media all and (max-aspect-ratio: 1) {
  main #page_back { background-image:url(../../images/front.jpg); }
}

但是在瀏覽器中看起來像這樣：

@media not all {
    main #page_back {
         background-image: url("../../images/front.jpg");
    }
}
@media not all {
    main #page_back {
        background-image: url("../../images/front.jpg");
    }
}

這解釋了為什么我沒有看到任何形象，但為什么有沒有 ？為何我的條件消失？

編輯

我正在做更多研究：

1. 我創建了這個js小提琴，以查看我的瀏覽器是否可以處理mediaquery http://jsfiddle.net/jnd4f8jd/ 。
2. 在項目運行期間，我在瀏覽器中更改了錯誤的mediaquery css，以查看它是否可以手動運行： 失敗！
3. 我取出了所有其他css文件，以確保問題不是來自其他任何css源： 失敗！
4. 嘗試了另一個mediaquery（最小寬度）， 它起作用了！

->這個特定的媒體查詢（aspect-ratio）似乎是一個問題，但是它不可能是瀏覽器的問題，因為jsfiddle是按方面工作的。 什么會導致“長寬比”問題？

Answer 1

您可以通過使用Jquery應用CSS而不是媒體查詢來解決此問題嗎？ 這樣的事情可能會完成這項工作？

$(document).ready(function() {
    var ViewHeight = $(window).height();
    var ViewWidth = $(window).width();
    var AspectRatio = ViewHeight/ViewWidth;
    if (AspectRatio < 1){
        $("#page_back").css("background-image", "url(../../images/front.jpg)");
    } else {
        $("#page_back").css("background-image", "url(../../images/front.jpg)");
    }
});