tkadlec/gist:3645415

## 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>