Give user the option to view desktop version of responsive layout

Question

What is the easiest way to give users the option to view the desktop version of a website on a mobile device when using a responsive layout?

techfoobar · Accepted Answer

Give some class like responsive to your main HTML, i.e. something like:

<body class="responsive">
...
</body>

And write your CSS without the .responsive parent prefix for normal screens:

.myheading {
...
}
.mybutton {
...
}

Use the .responsive parent prefix in your media queries for smaller screens

@media all and (max-width: 320px) { /* example */
    .responsive .myheading {
    ...
    }
    .responsive .mybutton {
    ...
    }
}

When someone wants to view the big screen version, simply do:

$('body').removeClass('responsive');

and your media queries will be ignored from there on. when you want to switch back to being responsive, simply do:

$('body').addClass('responsive');

NOTE: the above solution assumes jquery, can be just as easily done even without jquery.

Donate For Us