僅在移動設備上顯示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）。