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>

Please provide some code that you have now. Show us what is working, and what isn't so that we can help you better. — krillgar, Apr 25 '14 at 18:28
the @media screen attribute with max-width for CSS might help — xd6_, Apr 25 '14 at 18:29
If you would like to prevent that the div is included in the markup that is send to the client i would assume that you have to search for a serverside solution. — surfmuggle, Apr 25 '14 at 18:31
This might be an option: http://stackoverflow.com/questions/11031091/how-can-i-serve-separate-mobile-and-desktop-pages-from-the-same-uri-using-htacc — showdev, Apr 25 '14 at 18:41

score 2 · Answer 1 · answered Apr 25 '14 at 18:36

2

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

answered Apr 25 '14 at 18:36

bto.rdz

6,636
4
35
52

That's what I'm already doing. But, I want to not even load the content on the page at all. If you view source on a desktop, I don't even want the HTML to be there. It should only be loaded when needed. – James Anderson Apr 25 '14 at 18:37
1

But he wants the block to not run on the client at all. So there's only a serverside solution or an ugly (heavier) javascript code. – Kai Apr 25 '14 at 18:38
as @Kai said, this is the cleanest solution, otherwise you should try some jquery and delete those divs – bto.rdz Apr 25 '14 at 18:39
@Kai The thing is, inside each div is an image. The images add up to 340KB even after being fully optimized. So if there's a solution that's less than 340KB I'm all ears. I'm trying to not load 340KB for everyone - only the people that need it on mobile devices. – James Anderson Apr 25 '14 at 18:39
What server-side language are you using? ASP, PHP, Node.JS, etc.? – Kai Apr 25 '14 at 18:41
@Kai ASP, but I'm somewhat limited via my SaaS – James Anderson Apr 25 '14 at 18:41

Ford · Answer 2 · 2014-05-04T18:06:09.487

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 divs). 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 divs/images based on the user's viewport; lazyload, jQuery, etc.

Kai · Answer 3 · 2014-04-25T20:04:52.310

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).

Displaying div only on mobile devices

3 Answers3

Linked