JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div class="red">RED</div>

CSS

/* Smartphones (portrait and landscape) ----------- */
 @media only screen and (min-width : 320px) and (max-width : 480px) {
    /* Styles */
    html {
        background:rgb(255, 0, 0);
    }
}
/* Use min-device-width & max-device-width for actual use. I used basic min-width and max-width for the fiddle demo, so that you can resize and run it and see that jQuery Mobile is loading conditionally. 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { */

JavaScript

$(function () {
    var color = $('html').css('backgroundColor');
    $('div').hide();
    if (color == 'rgb(255, 0, 0)') {
        $('.red').show();

        $.getScript("http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js", function () {
            alert("Script loaded and executed.");
            // here you can use anything defined in the loaded script

        });
    }
    // add additional if statements for other devices here

});