仅在移动设备上显示 div [英] Displaying div only on mobile devices

查看：33
本文介绍了仅在移动设备上显示 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 div，我只想在移动设备和移动浏览器大小上加载它.

我使用的是 Bootstrap 3.1.1，但使用的是可见的 &隐藏的类仍然会在后台加载内容，即使它是隐藏的.

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

编辑

我只想在移动设备上加载这整段代码 &移动浏览器大小(如果我调整桌面浏览器的大小).就像我说的，我使用的是 Bootstrap 3.1.1，但代码仍然在后台加载，这与我想要做的事情无关；在移动设备上加载较轻的内容，在桌面设备上加载较重的内容.

使用下面的代码，它无论如何都会在后台加载，从而产生开销.仅当用户使用移动设备或他们的浏览器是移动宽度时，我才需要一种方法将整个代码段插入到页面中.

我希望代码本身仅在移动设备或移动浏览器大小时才包含.

Bootstrap 所做的只是通过 display:none 从前端隐藏内容；当有人访问该页面时，它仍然会加载.我什至不需要在需要之前加载它.

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="现场制作" target="_blank"><img class="img-responsive" src="/images/art/Fieldproduction-cat-sprite.png"></a>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="修剪工具" target="_blank"><img class="img-responsive" src="/images/art/Pruning-cat-sprite.png"></a>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="材料处理" target="_blank"><img class="img-responsive" src="/images/art/materialhandling-cat-sprite.png"></a>

<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 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 class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="浇水和灌溉" target="_blank"><img class="img-responsive" src="/images/art/watering-cat-sprite.png"></a>

<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 class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="除草剂和杀虫剂" target="_blank"><img class="img-responsive" src="/images/art/herbicides-cat-sprite.png"></a>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="温室生产" target="_blank"><img class="img-responsive" src="/images/art/greenhouse-cat-sprite.png"></a>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="肥料与处理" target="_blank"><img class="img-responsive" src="/images/art/fertilizers-cat-sprite.png"></a>

<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 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 class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="电源设备" target="_blank"><img class="img-responsive" src="/images/art/powerequipment-cat-sprite.png"></a>

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

<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 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 class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="测量与测量" target="_blank"><img class="img-responsive" src="/images/art/measuring-cat-sprite.png"></a>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="维护用品" target="_blank"><img class="img-responsive" src="/images/art/maintenance-cat-sprite.png"></a>

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

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/hand-tools/c/P01/" title="二手、划痕、凹痕物品" target="_blank"><img class="img-responsive" src="/images/art/useditems-cat-sprite.png"></a>

</节>

解决方案

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

基本上你有 4 个选择

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

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

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

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>

解决方案

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

这篇关于仅在移动设备上显示 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆