All geek questions in one place

Show full site button to bypass css media requests

I use css media queries on my website to switch to a more vertical layout on smaller devices. This works very well, but I would like to add a button on the site with something like "Show desktop version". I want to make this button (or link, whatever) power or change the ratings of media queries so that they evaluate as if the screen width was larger than it (for example, 1200 pixels instead of 320 pixels). Is it 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 css */

, css- - . , - javascript. " "

css. 2 , css . : : CSS -?

2

css- javascript. , : http://jonhiggins.co.uk/words/max-device-width/

+4
3

, , , -. :

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

full site .full-site, 395 .

http://jsfiddle.net/7ZW9y/

+4

: 1) - , 2) -.

1:

-, ( " " ) (, "mobile.css" ):

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

jQuery (, $('#mobileStyle').remove()). , , , .

2: CSS

, - . , .mobile-ready <body>, :

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

" " .mobile-ready <body>, , . CSS LESS Sass.

+3

... , .

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

, . , , , , 865. .

+3

Source: https://habr.com/ru/post/1523372/

More articles:


All Articles