Question

I am loading my mobile only CSS using a media query such as

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" />

but in addition to these CSS changes I also need to reorder part of the HTML such as

$('#moveOne').after($('#theOther');

I only want this move to be actioned if the browser has definitely loaded the mobile.css. So I thought of adding some odd CSS value inside mobile.css and then checking the value of it like so

if($'#notVisible').css('color') == 'red') {
    $('#moveOne').after($('#theOther');
}

Is there a better way of doing this?

Answer 1

I think, what you are doing is absolutely good.

But a more logical way would be setting width instead of color.

if($'#notVisible').width() == '500px') {
    $('#moveOne').after($('#theOther');
}

Also, you can try matchMedia.js

Look here Using_media_queries_from_code too.