Mobile 引导隐藏的电话资产仍在电话上加载

我正在为手机和桌面构建一个应用程序。有些资产我不想在移动设备上显示或加载。使用引导程序有一个名为

隐藏电话的标签

，用于在电话上隐藏资产。然而，它们似乎仍在后台加载并使用带宽。有没有办法防止这种情况发生？

是否在标题中包含视口标记

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

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

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

---

---

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

您的标题中是否包含viewport标记

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

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

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

---

---

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

我遇到了与Bootstrap响应实用程序相同的问题。问题是浏览器将首先加载所有HTML图像，然后应用Bootstrap使用的CSS规则，即

display:none

，用于您告诉它隐藏的特定元素

一种可能的解决方案是避免使用这些实用程序，而是使用CSS

background image

属性显示图像。然后，您可以选择Bootstrap与其响应实用程序一起使用的相同屏幕断点，或者创建自己的断点。下面是我过去使用过的一个简化示例（移动设备的一组图像，以及其他所有设备的一组图像）

#图像{
背景图片：url（largeimage.jpg）；
}
@仅介质屏幕和（最大宽度：480px）{
#图像{
背景图片：url（mobileimage.jpg）；
}
}

---

您可以在此处找到有关引导断点的更多信息：

我在引导响应实用程序中遇到了相同的问题。问题是浏览器将首先加载所有HTML图像，然后应用Bootstrap使用的CSS规则，即

display:none

，用于您告诉它隐藏的特定元素

一种可能的解决方案是避免使用这些实用程序，而是使用CSS

background image

属性显示图像。然后，您可以选择Bootstrap与其响应实用程序一起使用的相同屏幕断点，或者创建自己的断点。下面是我过去使用过的一个简化示例（移动设备的一组图像，以及其他所有设备的一组图像）

#图像{
背景图片：url（largeimage.jpg）；
}
@仅介质屏幕和（最大宽度：480px）{
#图像{
背景图片：url（mobileimage.jpg）；
}
}

---

您可以在此处找到有关引导断点的更多信息：

注意，您可能希望将最大比例指定为3，以便用户可以放大以更好地查看某些图像…我包括了视口。同样的问题。我应该提到的是，我不想在手机上加载的东西是在iframe中。当前的问题是。。对象/视图是否仍将加载。。。你提到的课程是关于能见度的。。。如果你不想加载它，那么我建议使用JavaScript测试并为支持的平台注入你的iframe。注意，你可能希望将最大比例指定为3，这样用户可以放大以更好地查看一些图像…我包括了视口。同样的问题。我应该提到的是，我不想在手机上加载的东西是在iframe中。当前的问题是。。对象/视图是否仍将加载。。。你提到的课程是关于能见度的。。。如果您不想加载它，那么我建议使用JavaScript测试并为受支持的平台注入iframe。