Inconsistent media.css loading after multiple reloads

Question

I have an issue that seems to be inconsistent loading of my media.css file. I think this is happening because the order and the page is rendering before it hits it.

Most of the time, this correct version will load:

Other times (noticed by my boss) the incorrect version will load :

I am only using 1 breakpoint to cover large mobile phones and smaller smart phones. iPads and tablets look/work fine so we don't use a mid sized break point for them.

My media queries are as follows :

@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}

it is being loaded at the bottom of the head after a bunch of scripts/css for other modules etc. Any insight would be greatly appreciated. Thanks.

Answer 1

I figured out my problem. The media.css file wasn't being hit by the time the cached page contentloaded. I used this function on require.js advanced uses page to make sure this file is loaded and then initiated the function in some responsive 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');
    } 
});