5

I'm using css media queries on my website to switch to a more vertical layout on smaller devices. This works quite well, but I'd like to add a button on the site with something like "Show desktop version". I want to make this button (or link, whatever) force or alter the media query evaluations so they evaluate as if the screen width was bigger than it is (e.g. 1200px instead of 320px). Is this possible?

My css looks like this:

#logo {
    /* Mobile style */
    [...]
    
    @media (min-width: @screen-sm) {
        /* Desktop style */
        [...]
    }
}

#footer {
    /* Mobile style */
    [...]
    
    @media (min-width: @screen-sm) {
        /* Desktop style */
        [...]
    }
}

/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */

I found this interesting approach which uses a css class on the body instead of media queries to switch between layouts. However, it completely does away with the actual media queries and uses javascript instead. "Full web" mobile browsers and screen-size media queries based

edit

Refined the css example. The first 2 answers are very helpful, but I'd rather not have to completely modify the css organization to separate at the root desktop and mobile versions. One more interesting technique: LESS: Can you group a CSS selector with a media query?

edit 2

An interesting approach is to modify the css media queries via javascript. It scares me a bit though because browser support might be unreliable for an such an obscure technique: http://jonhiggins.co.uk/words/max-device-width/

Community
  • 1
  • 1
bernie
  • 9,820
  • 5
  • 62
  • 92

3 Answers3

5

There is a bit of redundancy with this method, but a selector has higher specificity its properties have precedence even if a media query matches. For example:

.container, .full-site.container {
    /* full site styles */
}
@media (max-width: 395px) {
    .container {
        /* mobile styles */
    }
}

When full site is clicked, add the .full-site class and the full site styles will apply even on devices with a 395 pixel width.

http://jsfiddle.net/7ZW9y/

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • I ended up having both ".mobile-ready" and ".desktop-view" classes. The body always has one or the other. – bernie Feb 10 '14 at 20:14
3

Two possible implementations comes to mind: 1) segregate your media queries into a separate stylesheet, 2) prepend a specific class to all the selectors inside a media query.

Option 1: Separate stylesheets

Put all of the media queries you are seeking to remove (using the "Show desktop version" button) into a separate stylesheet (e.g., "mobile.css"):

<link rel="stylesheet" type="text/css" href="normal.css" />
<link rel="stylesheet" id="mobileStyle" type="text/css" href="mobile.css" />

You can then remove this element using jQuery (e.g., $('#mobileStyle').remove()). Removing the element referencing the stylesheet will remove all the styles defined in the stylesheet.

Option 2: Prepend a CSS class

Keep everything in a single stylesheet but prepend all media-queried selectors with a single class. For example, you could add a .mobile-ready class to the <body> and then:

@media (min-width: ... AND max-width: ...) {
    .mobile-ready header{
    }
    .mobile-ready footer{
    }
    .mobile-ready ...{
    }
}

With your "Show desktop version" button, remove the .mobile-ready class from your <body>, which will remove all the styles encompassed by the class. Writing CSS in this manner is easy with LESS or Sass.

Jacob Budin
  • 9,753
  • 4
  • 32
  • 35
3

Try this ... simple, but reasonable solution for sites that are heavily coded.

$('meta[name="viewport"]').prop('content', 'width=870');

Set the width to what you need. I used this in an instance where an existing site is in place and I need to allow mobile to display as normal page, but normal page is centered with content having a width of 865. This minimizes the impact of a full page on a mobile device.

rfornal
  • 5,072
  • 5
  • 30
  • 42
  • Can you provide any information about supported devices? See http://stackoverflow.com/questions/11075090/altering-meta-viewport-tag – bernie Dec 01 '14 at 21:25
  • Supported devices? This code should work on all devices, but as I posted there, there may be some issue with dpi/definition of the device, basically 1 pixel is not equal to 1 pixel. – rfornal Dec 02 '14 at 14:38