40

如果我的 CSS 基于移动样式，然后@media对逐渐变大的显示器（平板电脑、台式机等）使用查询，移动设备会使用桌面样式吗？

我相信通常情况下，移动设备会加载所有图像，即使它们不适用于其自身特定的媒体尺寸。这意味着它将加载所有图像并隐藏与其基于查询的样式表不匹配的图像。

我想要做的是为网站的较大版本使用一个背景：

.splash {
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}

另一个用于移动版本：

.splash {
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}

如果我在任何媒体查询之前应用移动 CSS，并使用如下查询添加大型媒体 CSS @media screen and (min-device-width: 481px) {...}，移动设备也会加载大图像吗？

4

3 回答 3

37

行为取决于浏览器，但 iOS Safari 和 Android Chrome 将尊重媒体查询，并且仅下载适用的媒体查询的背景图像。

如果您想检查此行为，请尝试使用 Mobitest ( http://mobitest.akamai.com/ ) 或连接设备加载页面。

如果您使用单独的 CSS 文件（我敦促您不要这样做），即使浏览器不需要它们，浏览器也会下载它们中的每一个，这是 CSSOM 的限制。一些浏览器（例如基于 WebKit 和 Blink 的浏览器）优先考虑样式表，因此首先下载需要渲染页面的浏览器，然后再下载其他浏览器。

需要注意的一件事是 display:none 在内容图像上，因为它在许多情况下不会阻止下载。Tim Kadlec 在这里进行了更多探索：http: //timkadlec.com/2012/04/media-query-asset-downloading-results/

于 2013-05-21T10:58:05.483 回答
8

Tim Kadlec 对此进行了一些很棒的研究——媒体查询和资产下载结果

您的具体问题已在测试#4 中得到解答——结果参差不齐。最好对您的两个图像进行媒体查询。

于 2013-11-13T23:19:07.813 回答
3

这听起来像是很大程度上依赖于浏览器，但我想任何值得一提的移动浏览器都会尝试通过不加载标记为不支持它的图像（并且可能不加载整个样式表）来减少数据使用。此外，许多移动浏览器宁愿不被识别为移动浏览器。我知道我讨厌在我的 iPad 上打开一个网站，而一个移动样式表迫使我在 9.7 英寸的屏幕上查看一小段单栏网站。

所以媒体查​​询是不可靠的，但仍然值得（它们真的不会伤害任何东西，只要它们被负责任地使用），这无助于一个相当迟钝（但仍然很好）的问题；是时候做一些测试了！

大多数现代桌面浏览器都附带了开发人员工具。我目前最喜欢的是 FireFox 的深色和漂亮的网络检查器（3D 视图特别适合）。但是在移动端呢？您的大部分移动受众不会使用带有开发工具的浏览器。

好吧，你有几个选择：

  • Firebug Lite在移动浏览器上的结果好坏参半，但在其他检查器不可用的大多数情况下，它是一个很好的选择。 不过，它似乎确实适用于 iOS和其他支持 HTML5 的移动浏览器。
  • 这个问题建议使用一种叫做“weinre”的东西。我从未使用过它，但它看起来足够合法。
  • 如果您对只针对少数特定浏览器感到满意，那么许多浏览器都包含开发人员工具。比如安卓的谷歌浏览器！

无论您选择什么，您都将寻找某种资产查看器；也许是时间线视图。任何可以让您查看页面加载内容、加载顺序以及加载时间的工具。

祝你好运！

于 2013-05-20T20:04:38.040 回答