Skip to content

Instantly share code, notes, and snippets.

Created September 5, 2012 21:44
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tkadlec/3645415 to your computer and use it in GitHub Desktop.
Save tkadlec/3645415 to your computer and use it in GitHub Desktop.
"View Desktop Layout" link for responsive sites
<title>Mobile First "View Desktop" Link</title>
<meta id="vp" name="viewport" content="width=device-width" />
<style type="text/css">
font-family: Helvetica, sans-serif;
text-decoration: underline;
color: blue;
color: #fff;
background-color: blue;
@media screen and (min-width: 600px) {
background-color: red;
<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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment