Question

我有一个div，我只想加载移动设备 - 以及移动浏览器尺寸。

我正在使用Bootstrap 3.1.1，但是使用了可见＆amp;隐藏的类仍会在后台加载内容，即使它是隐藏的。

那么，无论如何要轻易做到这一点？在哪里我可以将我的HTML粘贴到一段代码中，它只是有用吗？

修改的

我只想在移动设备上加载整段代码＆amp;移动浏览器大小（如果我调整桌面浏览器的大小）。就像我说的，我正在使用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

您有相当多的图片，因此这并不是最佳选择，但一种解决方案是使用background-image和媒体查询。如果设备不满足width的约束，则图像不会被下载，因此不会被渲染。为了使它工作，你需要有一些CSS，如

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

周围的div有一个.col类，并且明确width和height（这不是必需的，您可以调整图片大小属性或div S）。然后在你的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 s / images; lazyload，jQuery等。

Answer 2

我不确定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 3

我一直在玩JS Cookie！

这可能是一个可能的答案..使用cookies ..

首先你有这个css块：

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

将类.hideForMobile添加到要在移动电话上隐藏的标记。这也是javascript的标识符。

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

Cookie isMobile是否已设置？
- 如果是，请不要做任何事。
- 如果为false，我们将检索类.hideForMobile的当前显示状态
  - 我们会将其存储为服务器的cookie。
当用户请求/重新加载页面时，服务器现在可以检查它是否是使用cookie的移动设备，它将返回true（= mobile）或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 + ';';
    }
});

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

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

仅在移动设备上显示div

3 个答案: