Geek Answers Handbook

Responsive Design: Allow the user to also view the full site

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

eg. They browse on the iPhone, but want to see the full site. They click the link "Full site" and it shows the version 1024px.

+7
source share
3 answers

If you use media queries, use only the rules under the body element, which has a responsive class.

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

If the user does not want to view the responsive layout, simply remove the “responsive” class from the body element, invalidating all the rules. You can save cookie preferences or in any other way.

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

Reducing the window to 500 pixels will cause the text to be white and the background blue. This is because the body has a “responsive” class. Clicking on the first paragraph will switch this class and thus switch the effects of the media query itself.

+8
source

I was curious about that. I have had success using jQuery to change the viewport tag, seems to work quite well from what I can say so far. It does not require multiple stylesheets or a lot of additional CSS.

http://creativeandcode.com/responsive-view-full-site/

+2
source

I did not try, but I thought about it myself. I assume that you can use a stylesheet that deactivates the main stylesheet, leaving the user with the full version

Switching style sheets, of course, is not a new concept. Here's an article for ALA, circa 2001, on transitioning style sheets: http://www.alistapart.com/articles/alternate/

+1
source

More articles:


All Articles