仅在移动设备上显示div

Question

我有一个仅想在移动设备上加载的div-和移动浏览器大小。

我正在使用Bootstrap 3.1.1，但是使用可见和隐藏类仍然将内容加载到后台，即使它是隐藏的。

那么，无论如何轻松做到这一点？ 在哪里我可以将HTML粘贴到一段代码中，并且可以正常工作？

编辑

我只想在移动设备和移动浏览器大小上加载整个代码部分（如果我调整桌面浏览器的大小）。 就像我说的那样，我正在使用Bootstrap 3.1.1，但是代码仍然在后台加载，这超出了我要执行的操作； 在移动设备上加载较轻的内容，在台式机上加载较重的内容。

使用下面的代码，无论如何它都会在后台加载，从而产生开销。 我仅需要在用户使用移动设备或浏览器为移动宽度时才需要将整个代码段插入页面。

我希望代码本身甚至仅在移动设备或移动浏览器大小的情况下被包括在内。

Bootstrap所做的全部工作就是通过display：none;从前端隐藏内容。 当有人访问该页面时，它仍然会加载。 我什至不需要加载它，直到需要为止。

<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

我不确定bootstrap是否检测到它是moivil设备，我确定它会做什么，它会根据您的@media配置检测到您设备的屏幕分辨率

基本上你有4个选择

visible-lg大屏幕， visible-md中型屏幕， visible-sm小屏幕， visible-xs特小屏幕

因此，如果您希望此div仅在小型设备中可见，则应添加visible-xs类，如下所示：

<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

您有很多图像，因此这并不是最佳选择，但是一种解决方案是利用background-image和媒体查询。 如果设备不满足width限制，则不会下载图像，因此不会渲染图像。 要使其正常工作，您需要具有一些CSS，例如

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

周围的div具有.col类以及显式的width和height （这不是必需的，您可以调整图像大小属性或div ）。 然后在你的CSS中添加

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

您可以将其包装在SASS函数中以迭代1 - max images并为背景放置适当的图像：

@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}");
        }
    }
}

然后你的HTML

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

小提琴 ： http : //jsfiddle.net/kYC8C/1/
检查网络标签为768px ，然后调整窗口大小并观看图像在网络标签中的下载。

替代解决方案 ：

• 服务器端对用户代理程序/视口的检测，该代理程序视页面的移动/桌面版本而定，具体取决于用户的设备/大小。
• 重写规则以重定向到网站的移动/桌面版本。
• JavaScript根据用户的视口写出div /图像； lazyload，jQuery等

Answer 3

我一直在玩JS cookie！

这可能是一个可能的答案。

首先，您具有以下css块：

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

将类.hideForMobile添加到要在手机上隐藏的标签中。 这也是javascript的标识符。

现在，准备好文档后，我们将进行以下检查：

• cookie是否设置为isMobile ？
  • 如果为true，则什么也不做。
  • 如果为false，我们将检索类.hideForMobile的当前显示状态。
    • 我们将其存储为服务器的cookie。
• 当用户请求/重新加载页面时，服务器现在可以使用cookie检查它是否是移动设备，该cookie将返回true（=移动）或false（=非移动）。

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 + ';';
    }
});

这是你想要的？ 您只需要一个服务器端脚本来检查cookie是否已设置，如果已设置，则可以阻止在移动设备上发送数据。

注意：可能有更清洁的方法，例如使用纯服务器端代码（或检查USER_AGENT）。