多次重载后加载的media.css不一致

Question

我有一个问题，似乎是我的media.css文件的加载不一致。我认为这是发生的，因为订单和页面在它到达之前呈现。

大多数情况下，这个正确的版本会加载：

其他时候（我的老板注意到）将加载错误的版本：

我只使用1个断点来覆盖大型手机和小型智能手机。 iPad和平板电脑看起来/工作正常，因此我们不会使用中等大小的断点。

我的媒体查询如下：

@media screen and (max-device-width : 768px) and (orientation:portrait) {//lots of styles}
@media screen and (min-device-width : 320px) and (max-device-width : 1200px) and (orientation:landscape) {//some more stylez}

在一堆脚本/ css用于其他模块之后，它被加载到头部的底部。任何见解都将非常感激。感谢。

Answer 1

我发现了我的问题。缓存页面内容加载时，media.css文件未被命中。我在require.js advanced uses page上使用此函数来确保加载此文件，然后在一些响应式jQuery中启动该函数。

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
     document.getElementsByTagName("head")[0].appendChild(link);
}

jQuery(window).load(function(){
    if (jQuery(window).width() < 768) {
       loadCss('http://cns.utexas.edu/templates/CNS_3/css/media.css');
    } 
});