媒體查詢問題與瀏覽器

Question

我想根據縱橫比加載不同的背景圖片。我正在使用LESS css。問題是，我沒有得到任何背景圖像，我無法弄清楚這個問題。

（我知道，此刻的CSS是廢話，我試圖simplyfie我的代碼來得到它的工作，但我不能。）

這是LESS CSS部分與mediaqueries：

#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. 嘗試了其他媒體查詢（最小寬度）它的工作原理！

- >這似乎是與此特定媒體查詢（寬高比） 一個問題，但因爲工作的jsfiddle作爲aspected它不可能是一個瀏覽器的問題。 什麼可能導致「長寬比」問題？

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)"); 
    } 
});