javascript - "Show full site" button to bypass css media queries - Stack Overflow

admin管理员组

文章数量:1289352

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 pletely 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 pletely 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: /

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 pletely 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 pletely 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/

• javascript
• html
• css
• media-queries

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jan 23, 2014 at 15:37 berniebernie 10.4k77 gold badges6666 silver badges9999 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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/7ZW9y/

Two possible implementations es 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 enpassed by the class. Writing CSS in this manner is easy with LESS or Sass.

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.

本文标签： javascriptquotShow full sitequot button to bypass css media queriesStack Overflow