Bootstrap 隐藏手机资产仍会加载到手机上答案

【问题标题】：Bootstrap hidden-phone assets still load on phoneBootstrap 隐藏手机资产仍会加载到手机上
【发布时间】：2013-05-28 20:03:27
【问题描述】：

我正在开发一款适用于移动设备和桌面设备的应用。有些资产我不想在移动设备上显示或加载。使用 Bootstrap 的 responsive design 有一个名为 hidden-phone 的标签，用于在手机上隐藏资产。但是，它们似乎仍在后台加载并使用带宽。有没有办法防止这种情况发生？

【问题讨论】：

标签： mobile twitter-bootstrap

【解决方案1】：

我在使用 Bootstrap 响应式实用程序时遇到了同样的问题。问题是浏览器将首先加载所有 HTML 图像，然后应用 Bootstrap 使用的 CSS 规则，即 display:none 用于您告诉它隐藏的特定元素。

一种可能的解决方案是避免使用这些实用程序，而是使用 CSS background-image 属性显示图像。然后，您可以选择 Bootstrap 与他们的响应实用程序一起使用的相同屏幕断点，或者自己制作。下面是我过去使用的一个简化示例（一组用于移动设备的图像，一组用于其他所有设备的图像）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        #image { 
            background-image: url(largeimage.jpg); 
        }
        @media only screen and (max-width: 480px) {
            #image { 
                background-image: url(mobileimage.jpg); 
            }
        }
        </style>
    </head>
    <body>
        <div id="image"></div>
    </body>
</html>

您可以在此处找到有关 Bootstrap 断点的更多信息：http://getbootstrap.com/css/#grid-media-queries

【讨论】：

【解决方案2】：

您是否在标题中包含视口标签？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

如果不是，您可能会渲染到 1024 像素宽，这会影响输出。此外，大小取决于屏幕分辨率，而不是使用的设备类型。

如果你想更多地询问浏览器，这需要用JS来完成。我在几个地方这样做，并将类注入到 HTML 元素中，以便以有限的方式与设备/浏览器特定目标一起使用。您可能还想看看 Modernizr。

鉴于下面的 cmets，并且您的目标是您不希望为移动浏览器加载的 iframe，我建议使用 JavaScript 测试非移动平台，并通过 JS 注入您的 iframe，而不是使用 Bootstrap “隐藏”内容。

【讨论】：

注意，您可能希望将最大比例指定为 3，以便用户可以放大以更好地查看某些图像...
我包括视口。同样的问题。我应该提一下，我不想在移动设备上加载的东西是在 iframe 中。
手头的问题..对象/视图仍将加载...您提到的类与可见性有关...如果您不想加载它，那么我建议使用 JavaScript 为支持的平台测试和注入你的 iframe。