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
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?
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/
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.