smilledge smilledge - 1 year ago 33
CSS Question

Give user the option to view desktop version of responsive layout

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?

Answer Source

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.