Question

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

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

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

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

和移动版的另一个：

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

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

Answer 1

行为取决于浏览器，但iOS Safari和Android Chrome会尊重媒体查询，只会下载适用媒体查询的背景图片。

如果要检查此行为，请尝试使用Mobitest（http://mobitest.akamai.com/）或系留设备加载页面。

如果你使用单独的CSS文件（我也不推荐你），浏览器会下载每个文件，即使它不需要它们，这也是CSSOM的限制。一些浏览器，基于WebKit和Blink的样式表优先考虑样式表，以便首先下载呈现页面所需的页面，然后在某些时候下载其他页面。

要注意的一件事是在内容图片上显示：none，因为在许多情况下它不会阻止下载。蒂姆·卡德莱克在这里更多地探讨了这一点：http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 2

蒂姆·卡德莱克为此做了一些很棒的研究 - Media Query & Asset Downloading Results

您的具体问题在测试＃4中得到解答 - 结果不稳定。最好对您的图像进行媒体查询。

Answer 3

这听起来似乎主要取决于浏览器，但我认为任何有价值的移动浏览器都会尝试通过不加载图片来减少数据使用量（并且可能不会加载整个样式表）被标记为不适合它。此外，许多移动浏览器不希望被识别为移动浏览器。我知道我讨厌它，当我在我的iPad上打开一个网站时，一个移动样式表迫使我在我的9.7英寸屏幕上查看一小块单列网站。

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

大多数现代桌面浏览器都附带了开发人员工具。我目前最喜欢的是FireFox的黑暗和漂亮的网络检查员（3D视图尤其适合死亡）。但是移动设备呢？移动受众群体中最大的部分不会出现在开发工具附带的浏览器中。

嗯，你有两个选择：

Firebug Lite在移动浏览器上有一些混合的结果，但是在其他检查员所在的大多数情况下，这是一个极好的选择不可用。 It does seem to work in iOS和其他手机但是，支持HTML5的浏览器。
This question建议使用名为“weinre”的内容。我从未使用它，但它看起来足够合法。
如果你只针对几个特定的浏览器，那么很多DO包括开发者工具。例如Google Chrome for Android！

无论你选择什么，你都会寻找某种资产观察者;也许是一个时间轴视图。任何类型的工具，可以让您查看页面加载的内容，加载页面的顺序以及加载时间。

祝你好运！

使用@media查询时，手机是否加载了不相关的查询和图片？

3 个答案: