Allow user to override media queries

[MargateSteve]

Is there a simple way to allow a user to ignore media queries and see the desktop version on any device?

 

Although the intention is to have all the information available at all resolutions, there are a few things, especially tables, that it will be impossible to replicate on smaller devices.

 

I know I could do it by calling a different style sheet if the user requests it or putting all the responsive stuff in a seperate sheet that will only be shown to users who have not chosen to override it but wondered if there was an easy way to fool a browser into thinking it was at a desktop resolution.

 

Thanks

Steve

[Frank P]

No, there isn't. But you have brought up a good point, an argument against certain media queries. Folks should always have a choice which site they want to visit. The problem is that nowadays there are many devices that are a sort of hybrid: something in between a phone and a full-size tablet.

[MargateSteve]

That is an issue I kept coming up against. Which viewports do I cater for explicitly and how do I make sure that it still looks correct on a desktop browser that is not opened full width.

[haku]

You can cater to whatever widths you want, there is no rule to it. For example, I have a site that caters to an iphone portrait view, and 'the rest' (ie - everything else). The key is in choosing exactly which devices sizes you want to target (aka breakpoints), and work from there.

 

As for your initial question, there are a few ways you can do this. You can set a class on your body, say 'responsive', and in all your media queries, you target this specifically:

 

 

@media screen and (max-width:768px)
{
  .responsive .something
  {
    float:left;
  }
}

 

Then, if the user clicks to see the 'full site', you remove the 'responsive' class from the body.

 

Or, you can put all your media queries into a separate stylesheet, and if the user clicks 'full site', you don't load that stylesheet.

 

The only problem with these is if you are using the 'mobile first' style of design, where the site is built first for mobile layouts (aka - portrait view on mobiles) working upwards through your breakpoints. With the above two examples, you would then see the mobile view as your full screen view. In such a case, you can then instead add a new class, say 'full' to your body. Then your media queries may look something like this:

 

.full .someting
{
  float:left;
}
 
@media screen and (min-width:1024px)
{
  .something
  {
    float:left;
  }
}

 

This way the code will be shown both when the 'full' class is applied to your body, as well as when the media query kicks in at 1024px.

Edited March 21, 2013 by haku

[MargateSteve]

I think that the separate stylesheets will be the way to go although it will mean a bit of hassle re-doing them.