Question

When using responsive design, is there a way to still allow a user to view the full site?

E.g. They are viewing on an iPhone, but want to see the full site. They click a “Full Site” link, and it shows them the 1024px version.

Answer 1

If you’re using media queries, only apply rules beneath a body element having the class ‘responsive’.

@media screen and (max-width: 320px) {
  body.responsive {
    color: blue;
  }
}

If the user doesn’t want to view the responsive layout, simply remove the ‘responsive’ class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.

Demo: http://jsbin.com/obaquq/edit#javascript,html

Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the ‘responsive’ class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.