Displaying div only on mobile devices

Question

I have a div that I'd like to only load on mobile devices - and mobile browser sizes.

I am using Bootstrap 3.1.1, but using the visible & hidden classes still loads the content in the background even if it's hidden.

So, anyway to do this easily? Where I can just paste my HTML into a section of code and it just works?

Edit

I only want to load this entire section of code on mobile devices & mobile browser sizes (if I resize my desktop browser). Like I said, I am using Bootstrap 3.1.1, but the code still loads in the background, defeating the point of what I'm trying to do; load lighter content on mobile, load heavier content on desktop.

With the code below, it gets loaded in the background anyways, creating overhead. I need a way to insert that entire section of code into a page only if the user is on a mobile device or their browser is a mobile width.

I want the code itself to only even be included if on mobile device or mobile browser size.

All Bootstrap does is hide the content from the front-end via display:none; it still gets loaded when someone visits the page. I need to not even load it until needed.

<section id="category-icons" class="row visible-xs visible-sm hidden-md hidden-lg">
    <div class="container White_BG">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Hand Tools" target="_blank"><img class="img-responsive" src="/images/art/Handtools-cat-sprite.png"></a>         
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Field Production" target="_blank"><img class="img-responsive" src="/images/art/Fieldproduction-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Pruning Tools" target="_blank"><img class="img-responsive" src="/images/art/Pruning-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Material Handling" target="_blank"><img class="img-responsive" src="/images/art/materialhandling-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Safety Equipment" target="_blank"><img class="img-responsive" src="/images/art/safetyequipment-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Sprayers & Spreaders" target="_blank"><img class="img-responsive" src="/images/art/sprayers-spreaders-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Watering & Irrigation" target="_blank"><img class="img-responsive" src="/images/art/watering-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Marking & Tagging" target="_blank"><img class="img-responsive" src="/images/art/markingtagging-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Herbicides & Pesticides" target="_blank"><img class="img-responsive" src="/images/art/herbicides-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Greenhouse Production" target="_blank"><img class="img-responsive" src="/images/art/greenhouse-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Fertilizers & Treatments" target="_blank"><img class="img-responsive" src="/images/art/fertilizers-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Container Production" target="_blank"><img class="img-responsive" src="/images/art/containerproduction-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Pest Control" target="_blank"><img class="img-responsive" src="/images/art/pestcontrol-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Power Equipment" target="_blank"><img class="img-responsive" src="/images/art/powerequipment-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Work Wear" target="_blank"><img class="img-responsive" src="/images/art/workwear-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Turf & Landscape" target="_blank"><img class="img-responsive" src="/images/art/turf-landscape-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Arborist Equipment" target="_blank"><img class="img-responsive" src="/images/art/arborists-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Measuring & Surveying" target="_blank"><img class="img-responsive" src="/images/art/measuring-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Maintenance Supplies" target="_blank"><img class="img-responsive" src="/images/art/maintenance-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Snow Removal" target="_blank"><img class="img-responsive" src="/images/art/snowremoval-cat-sprite.png"></a>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <a href="/hand-tools/c/P01/" title="Used, Scratch, Dented Items" target="_blank"><img class="img-responsive" src="/images/art/useditems-cat-sprite.png"></a>
        </div>
    </div>
</section>

Answer 1

I am not sure if bootstrap detects if it is a moivil device, what I am sure it does, it detects the screen resolution of your device, accoirding to your @media config

basically you have 4 choices

visible-lg large screens, visible-md medium screens, visible-sm small screens, visible-xs extra small screens

so if you want this div to be visible just in small devices you should add visible-xs class as follows:

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 visible-xs">
        <a href="/hand-tools/c/P01/" title="Hand Tools" target="_blank"><img class="img-responsive" src="/images/art/Handtools-cat-sprite.png"></a>         
    </div>

http://getbootstrap.com/css/#responsive-utilities

Answer 2

You have quite a few images, so this isn't exactly optimal, but one solution is to make use of background-image and media queries. If the device doesn't satisfy the constraint on width , the image won't be downloaded and hence not rendered. To make it work you'll need to have some CSS such as

.col img {
    min-width: 100%;
    min-height: 100%;
}

Where the surrounding div has a .col class and explicit width and height (this isn't required, you can tweak the image size attributes or the div s). Then in your css add

/* assuming mobile is < 768px  */
@media screen and (min-width: 768px) {
    .no-mobile-img-1 {
        background: url('../path/to/my/image.jpeg');
    }
}

You could wrap it up in a SASS function to iterate through 1 - max images and put the appropriate image for the background:

@media screen and (min-width: 768px) {
    $images = banana, monkey, donkey;
    @for $i from 1 through 3 {
        $ith: nth($images, $i);
        .no-mobile-img-#{$i} {
            background: url("#{$ith}");
        }
    }
}

Then your html

<div class="col">
    <img src="" class="no-mobile-img-1" alt="some text">
</div>

Fiddle : http://jsfiddle.net/kYC8C/1/
Check the network tab at 768px , then resize the window and watch the image be downloaded in the network tab.

Alternate Solutions :

• Server side detection of user-agent/viewport that serves a mobile/desktop version of the page depending on the user's device/size.
• Rewrite rule to redirect to mobile/desktop versions of the site.
• JavaScript to write out the div s/images based on the user's viewport; lazyload, jQuery, etc.

Answer 3

I've been playing with JS cookies!

This might be a possible answer..using cookies..

First you have this css block:

@media (max-width: 600px)
{
    .hideForMobile
    {
        display: none;
    }
}

Add the class .hideForMobile to the tags you want to hide it on the mobile phone. This will be the identifier for the javascript as well.

Now, after the document is ready, we will do the following checks:

• Is the cookie isMobile set?
  • If true, don't do anything.
  • If false, we will retrieve the current display state of class .hideForMobile
    • We will store it as a cookie for the server.
• When the user requests/reloads the page, the server can now check if it's a mobile device using the cookie, which will return true (=mobile) or false (=not mobile).

JS:

$(function()
{
    //    check if true.
    var isTruthy=document.cookie.indexOf('isMobile=true;')>-1? true : undefined,
    //    check if false.
        isFalsey=document.cookie.indexOf('isMobile=false;')>-1? true : undefined;
    //    We haven't set a cookie for the first time.
    //    DO IT.
    if (isTruthy==undefined && isFalsey==undefined)
    {
        //    Check if it's hidden.
        //    We will set the cookie depending on the display.
        var isMobile = $('.hideForMobile').first().css('display')=='none';
        //    store cookie for the server.
        document.cookie='isMobile=' + isMobile + ';';
    }
});

Is this what you are looking for? You only need a server-sided script that checks if the cookie is set, if so, you can prevent data to be sent if it is a mobile device.

NOTE: There is probably a cleaner way to it, for example using pure server-sided code (or checking USER_AGENT).