Geek asks and answers

Conditionally display content based on Media Query

I have a site where the desktop version shows a sidebar containing 10 to 20 small images. Until now, on mobile devices, this sidebar has simply been hidden with display: none, which is the least effective solution, since all the images will be uploaded anyway.

Now I'm wondering how best to disable the sidebar completely on mobile devices (without using a separate AJAX request).

The best solution I could think of is the following:

  • Enter the HTML of the sidebar into a JavaScript variable
  • check device width by checking media request using javascript (e.g. using Modernizr.mqor so)
  • If this test gives immobile device, write the contents of the variable in the DOM, for example, using innerHTML, jQuery.append, jQuery.prependor similar

I know that RWD performance can sometimes be a very complex topic and that the most effective solution is often not obvious. So can anyone think of a better solution than the one presented above?

+5
source share
2 answers

, , <img>, divs . css . , , , div.

#sidebar {
    display: none;
}
#sidebar div#sidebar-img-1 {
    width: 100px;
    height: 100px;
}
/* ... */

@media only screen and (min-width: 480px) {
    /* display sidebar */
    #sidebar {
        display: block;
    }
    /* set background image for sidebar items */
    #sidebar div#sidebar-img-1 {
        background-image: url("sidebar1.jpg");
    }
    /* ... */
}

, , , .

+1

, , : https://github.com/filamentgroup/Ajax-Include-Pattern/

, . , -, .

, , , :

<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside>

, , 40 (~ 640 ). , javascript , .

+1

More articles:


All Articles