0

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

4

2 回答 2

3

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

一种可能的解决方案是避免使用这些实用程序，而是使用 CSSbackground-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

于 2013-10-08T18:30:13.507 回答
0

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

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

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

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

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

于 2013-05-28T20:26:17.280 回答