tkadlec · September 5, 2012 21:44
diff --git a/gistfile1.html b/gistfile1.html
 <html>
 <head>
 	<title>Mobile First "View Desktop" Link</title>
 	<meta id="vp" name="viewport" content="width=device-width" />
 	<style type="text/css">
 		body{
 			font-family: Helvetica, sans-serif;
 		}
 		#toggle{
 			text-decoration: underline;
 			color: blue;
 		}
 		#small{
 			color: #fff;
 			background-color: blue;
 		}
 		@media screen and (min-width: 600px) {
 			#small{
 				background-color: red;
 			}
 			
 		}
 	</style>
 </head>
 <body>
 	<h1>Mobile First "View Desktop" Link</h1>
 	<p>Testing to see if we can dynamically alter the viewport so as to allow people to "enable" media queries if they want, therefore seeing the large screen version.</p>
 	<p id="small">On a small screen device (< 600px), no media queries apply and this paragraph has a background color of blue. On a large screen device (> 600px), a media query kicks in and turns the background to red.</p>
 	<p><strong>You won't notice any difference from resizing your browser window. The link only has an effect if you're using a small-screen device.</strong></p>
 	<a id="toggle">View "Desktop" Layout</a>
 	<script type="text/javascript">
 	window.onload = function(){

 		var large = false;

 		var vp = document.getElementById('vp');		
 		var original = vp.getAttribute('content');
 		document.getElementById('toggle').onclick = function(){
 			//make sure we found the viewport
 	    	if (vp) {
 	    		if (large) {
 	    			//large screen is displayed, toggle back to device-width
 	    			vp.setAttribute('content', original);
 	    			this.innerHTML = 'View "Desktop" Layout';
 	    			large = false;
 	    		} else {
 	    			//small screen is displayed, toggle to large layout
 	    			vp.setAttribute('content', 'width=980');
 	    			this.innerHTML = 'View "Mobile" Layout';
 	    			large = true;
 	    		}

 	    	}
 		}
 		

 	}
 		

 	</script>
 </body>
 </html>
	<html>
	<head>
	<title>Mobile First "View Desktop" Link</title>
	<meta id="vp" name="viewport" content="width=device-width" />
	<style type="text/css">
	body{
	font-family: Helvetica, sans-serif;
	}
	#toggle{
	text-decoration: underline;
	color: blue;
	}
	#small{
	color: #fff;
	background-color: blue;
	}
	@media screen and (min-width: 600px) {
	#small{
	background-color: red;
	}

	}
	</style>
	</head>
	<body>
	<h1>Mobile First "View Desktop" Link</h1>
	<p>Testing to see if we can dynamically alter the viewport so as to allow people to "enable" media queries if they want, therefore seeing the large screen version.</p>
	<p id="small">On a small screen device (< 600px), no media queries apply and this paragraph has a background color of blue. On a large screen device (> 600px), a media query kicks in and turns the background to red.</p>
	<p><strong>You won't notice any difference from resizing your browser window. The link only has an effect if you're using a small-screen device.</strong></p>
	<a id="toggle">View "Desktop" Layout</a>
	<script type="text/javascript">
	window.onload = function(){

	var large = false;

	var vp = document.getElementById('vp');
	var original = vp.getAttribute('content');
	document.getElementById('toggle').onclick = function(){
	//make sure we found the viewport
	if (vp) {
	if (large) {
	//large screen is displayed, toggle back to device-width
	vp.setAttribute('content', original);
	this.innerHTML = 'View "Desktop" Layout';
	large = false;
	} else {
	//small screen is displayed, toggle to large layout
	vp.setAttribute('content', 'width=980');
	this.innerHTML = 'View "Mobile" Layout';
	large = true;
	}

	}
	}


	}


	</script>
	</body>
	</html>