akikoo · June 17, 2012 12:21
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>

 <!-- 
    Technique for maintaining the media queries in CSS only. Media query CSS 
    execution is detected by JavaScript that reads the CSS generated content value.

    Credits: 
    http://adactio.com/journal/5414/
    http://adactio.com/journal/5429/
    https://gist.github.com/2481019
    https://gist.github.com/2482049
    http://css-tricks.com/examples/ConditionalCSS/

    Author: Aki Karkkainen (putting this demo together from the resources above)
    URL: https://gist.github.com/2944398
    Twitter: http://twitter.com/akikoo
 -->

 <html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <title>Detecting from JavaScript whether media queries have been executed in CSS</title>

        <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            body:after { /* Mobile first, no media query here */
                content: "nolayout";
                display: none; 
            }

            /* Demo start */
            .mediaquery {
                display: none;
            }
            .mediaquery-0 {
                display: inline;
                color: red;
            }/* Demo end */
            
            @media only screen and (min-width: 30em) { /* 480px */
                body:after {
                    content: "mobile";
                }

                /* Demo start */
                .mediaquery {
                    display: none;
                }
                .mediaquery-1 {
                    display: inline;
                    color: blue;
                }/* Demo end */
            }

            @media only screen and (min-width: 48em) { /* 768px */
                body:after {
                    content: "widescreen";
                }

                /* Demo start */
                .mediaquery {
                    display: none;
                }
                .mediaquery-2 {
                    display: inline;
                    color: green;
                }/* Demo end */
            }
        </style>

    </head>
    <body>

        <h1>Conditional Content based on CSS Media Queries</h1>

        <p>The media queries are maintained <strong>only</strong> in the CSS. 
            Width check happens on resize event, you might want to remove that 
            and trigger the script on page reload only.            
            <span class="mediaquery mediaquery-0">Width is 0&ndash;480px.</span> 
            <span class="mediaquery mediaquery-1">Width is 480&ndash;768px.</span> 
            <span class="mediaquery mediaquery-2">Width is more than 768px.</span>
        </p>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            (function ($, win, doc) {

                'use strict';

                $(window).resize(function () {

                    var size = win.getComputedStyle(doc.body, ':after').getPropertyValue('content');

                    // Some browsers have quotes, some don't in the returned value
                    size = size.replace(/"/g, "");
                    size = size.replace(/'/g, "");

                    // If you want to open your console to see the current value
                    // console.log('Current width is: ' + size);

                    if (size === 'mobile') {
                        // More code here, maybe loading content with Ajax
                    }

                    if (size === 'widescreen') {
                        // More code here, maybe loading even more content?
                    }

                }).resize();

            }(jQuery, this, document));
        </script>
    </body>
 </html>
	<!DOCTYPE html>

	<!--
	Technique for maintaining the media queries in CSS only. Media query CSS
	execution is detected by JavaScript that reads the CSS generated content value.

	Credits:
	http://adactio.com/journal/5414/
	http://adactio.com/journal/5429/
	https://gist.github.com/2481019
	https://gist.github.com/2482049
	http://css-tricks.com/examples/ConditionalCSS/

	Author: Aki Karkkainen (putting this demo together from the resources above)
	URL: https://gist.github.com/2944398
	Twitter: http://twitter.com/akikoo
	-->

	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8" />
	<title>Detecting from JavaScript whether media queries have been executed in CSS</title>

	<!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	body:after { /* Mobile first, no media query here */
	content: "nolayout";
	display: none;
	}

	/* Demo start */
	.mediaquery {
	display: none;
	}
	.mediaquery-0 {
	display: inline;
	color: red;
	}/* Demo end */

	@media only screen and (min-width: 30em) { /* 480px */
	body:after {
	content: "mobile";
	}

	/* Demo start */
	.mediaquery {
	display: none;
	}
	.mediaquery-1 {
	display: inline;
	color: blue;
	}/* Demo end */
	}

	@media only screen and (min-width: 48em) { /* 768px */
	body:after {
	content: "widescreen";
	}

	/* Demo start */
	.mediaquery {
	display: none;
	}
	.mediaquery-2 {
	display: inline;
	color: green;
	}/* Demo end */
	}
	</style>

	</head>
	<body>

	<h1>Conditional Content based on CSS Media Queries</h1>

	<p>The media queries are maintained <strong>only</strong> in the CSS.
	Width check happens on resize event, you might want to remove that
	and trigger the script on page reload only.
	<span class="mediaquery mediaquery-0">Width is 0–480px.</span>
	<span class="mediaquery mediaquery-1">Width is 480–768px.</span>
	<span class="mediaquery mediaquery-2">Width is more than 768px.</span>
	</p>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	(function ($, win, doc) {

	'use strict';

	$(window).resize(function () {

	var size = win.getComputedStyle(doc.body, ':after').getPropertyValue('content');

	// Some browsers have quotes, some don't in the returned value
	size = size.replace(/"/g, "");
	size = size.replace(/'/g, "");

	// If you want to open your console to see the current value
	// console.log('Current width is: ' + size);

	if (size === 'mobile') {
	// More code here, maybe loading content with Ajax
	}

	if (size === 'widescreen') {
	// More code here, maybe loading even more content?
	}

	}).resize();

	}(jQuery, this, document));
	</script>
	</body>
	</html>