浏览器的媒体查询问题

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