媒体查询常用的四个设备查询
A little while back, I mentioned I was doing some research for the book about how images are downloaded when media queries are involved. To help with that, I wrote up some automated tests where Javascript could determine whether or not the image was requested and the results could be collected by Browserscope for review. I posted some initial findings, but I think I’ve got enough data now to be able to go into a bit more detail.
不久前， 我提到我正在为这本书做一些研究，涉及涉及媒体查询时如何下载图像。 为了解决这个问题，我编写了一些自动化测试，其中Javascript可以确定是否请求了图像，并且Browserscope可以收集结果进行审查。 我发布了一些初步调查结果，但我认为我现在有足够的数据可以详细介绍。
First, any credit has to go to the awesome team at Cloud Four. Most of the tests were created by them for some testing they were doing. I just added some Javascript to automate them.
首先，任何荣誉都必须归功于Cloud Four的出色团队。 大多数测试是由他们创建的，用于他们正在进行的某些测试。 我只是添加了一些Javascript以使其自动化。
On to the results!
关于结果！
测试一：图片标签 (Test One: Image Tag)
This page tried to hide an image contained within a div by using display: none. The HTML and CSS are below:
该页面试图通过使用display隐藏一个div中包含的图像：无。 HTML和CSS如下：
<div id="test1">
<img src="images/test1.png" alt="" />
</div>@media all and (max-width: 600px) {
#test1 { display:none; }
}结果 (The results)
If there is one method of hiding images that I can say with 100% certainty should be avoided, it’s using display:none. It’s completely useless. It appears that Opera Mobile and Opera Mini don’t download the image (see the initial post for the reasons why), but the image is requested by, well, everyone else.
如果有一种我可以避免100％确定性地隐藏图像的方法，那就使用display：none。 这是完全没有用的。 Opera Mobile和Opera Mini似乎没有下载图像(原因请参阅初始文章)，但是其他人都要求该图像。
| Tested | Requests Image |
|---|---|
| Android 2.1+ | Yes |
| Blackberry (6.0+) | Yes |
| Chrome (4.1)+ | Yes |
| Chrome Mobile | Yes |
| Fennec (10.0+) | Yes |
| Firefox (3.6+) | Yes |
| IE | Yes |
| iOS (4.26+) | Yes |
| Kindle (3.0) | Yes |
| Opera (11.6+) | Yes |
| Opera Mini (6.5+) | No |
| Opera Mobile (11.5) | No |
| RockMelt | Yes |
| Safari (4+) | Yes |
| 经过测试 | 索取图片 |
|---|---|
| Android 2.1以上 | 是 |
| 黑莓(6.0+) | 是 |
| Chrome(4.1)+ | 是 |
| Chrome移动版 | 是 |
| 芬尼(10.0+) | 是 |
| 火狐(3.6+) | 是 |
| IE浏览器 | 是 |
| iOS(4.26以上) | 是 |
| Kindle(3.0) | 是 |
| 歌剧(11.6+) | 是 |
| Opera Mini(6.5+) | 没有 |
| Opera Mobile(11.5) | 没有 |
| 熔岩 | 是 |
| Safari(4+) | 是 |
结论 (Conclusion)
Simple: don’t do this.
很简单：不要这样做。
测试二：无背景图像显示 (Test Two: Background Image Display None)
In this test, a div was given a background image. If the screen was under 600px wide, the div was set to display:none. The HTML and CSS are below:
在此测试中，为div提供了背景图片。 如果屏幕宽度不足600像素，则div设置为display：none。 HTML和CSS如下：
<div id="test2"></div>#test2 {
background-image:url('images/test2.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test2 {display:none;}
}结果 (The results)
The same as with the first test: every browser tested, aside from Opera Mini and Opera Mobile, will download the image.
与第一次测试相同：除了Opera Mini和Opera Mobile外，所有经过测试的浏览器都将下载图像。
| Tested | Requests Image |
|---|---|
| Android 2.1+ | Yes |
| Blackberry (6.0+) | Yes |
| Chrome (4.1)+ | Yes |
| Chrome Mobile | Yes |
| Fennec (10.0+) | Yes |
| Firefox (3.6+) | No |
| IE | Yes |
| iOS (4.26+) | Yes |
| Kindle (3.0) | Yes |
| Opera (11.6+) | Yes |
| Opera Mini (6.5+) | No |
| Opera Mobile (11.5) | No |
| RockMelt | Yes |
| Safari (4+) | Yes |
| Silk | Yes |
| 经过测试 | 索取图片 |
|---|---|
| Android 2.1以上 | 是 |
| 黑莓(6.0+) | 是 |
| Chrome(4.1)+ | 是 |
| Chrome移动版 | 是 |
| 芬尼(10.0+) | 是 |
| 火狐(3.6+) | 没有 |
| IE浏览器 | 是 |
| iOS(4.26以上) | 是 |
| Kindle(3.0) | 是 |
| 歌剧(11.6+) | 是 |
| Opera Mini(6.5+) | 没有 |
| Opera Mobile(11.5) | 没有 |
| 熔岩 | 是 |
| Safari(4+) | 是 |
| 丝 | 是 |
结论 (Conclusion)
Once again: don’t do this. Thankfully, as some of the other tests show, there are a few easy ways to hide background images without having the image requested.
再说一遍：不要这样做。 值得庆幸的是，正如其他一些测试所示，有一些简单的方法可以隐藏背景图像而无需请求图像。
测试三：背景图像，父对象设置为不显示 (Test Three: Background Image, Parent Object Set to Display None)
In this test, a div was given a background image. The parent of the div (another div) was set to display:none when the screen was under 600px wide. The HTML and CSS are below:
在此测试中，为div提供了背景图片。 当屏幕的宽度小于600px时，div的父级(另一个div)设置为display：none。 HTML和CSS如下：
<div id="test3">
<div></div>
</div>#test3 div {
background-image:url('images/test3.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test3 {
display:none;
}
}结果 (The results)
Kudos to Jason Grigsby for catching this one. On the surface, it’s not entirely obvious why this would be any different than test two. However, when doing his initial research, he noticed this seemed to make a difference so he decided to test it. Lucky for us he did because this method is actually pretty reliable.
感谢Jason Grigsby抓住了这一点。 从表面上看，为什么这与测试两个有什么不同并不完全清楚。 但是，在进行初步研究时，他注意到这似乎有所不同，因此他决定进行测试。 对我们而言，他很幸运，因为这种方法实际上非常可靠。
| Tested | Requests Image |
|---|---|
| Android 2.1+ | No |
| Blackberry (6.0+) | No |
| Chrome (16+) | No |
| Chrome Mobile | No |
| Fennec (10.0+) | Yes |
| Firefox (3.6+) | No |
| IE 9+ | No |
| iOS (4.26+) | No |
| Kindle (3.0) | No |
| Opera (11.6+) | No |
| Opera Mini (6.5+) | No |
| Opera Mobile (11.5) | No |
| Safari (4+) | No |
| 经过测试 | 索取图片 |
|---|---|
| Android 2.1以上 | 没有 |
| 黑莓(6.0+) | 没有 |
| Chrome(16+) | 没有 |
| Chrome移动版 | 没有 |
| 芬尼(10.0+) | 是 |
| 火狐(3.6+) | 没有 |
| IE 9+ | 没有 |
| iOS(4.26以上) | 没有 |
| Kindle(3.0) | 没有 |
| 歌剧(11.6+) | 没有 |
| Opera Mini(6.5+) | 没有 |
| Opera Mobile(11.5) | 没有 |
| Safari(4+) | 没有 |
结论 (Conclusion)
This method works well. With the exception of the over-eager Fennec, every tested browser only downloads the image when needed. The issue with this method is that you do have the requirement of being able to hide the containing element. If that’s an option, then feel free to go ahead and use this approach.
此方法效果很好。 除了急切的Fennec外，每个经过测试的浏览器仅在需要时才下载图像。 这种方法的问题是您确实需要能够隐藏包含元素。 如果可以的话，请继续使用此方法。
测试四：级联覆盖的背景图像 (Test Four: Background Image with Cascade Override)
In this test, a div is given a background image. If the screen is under 600px, then the div is given a different background image. This tested to see if both images were requested, or only the one needed. The HTML and CSS are below:
在此测试中，给div一个背景图像。 如果屏幕小于600像素，则为div提供不同的背景图片。 这进行了测试，以查看是否同时请求了两个图像，或仅需要一个图像。 HTML和CSS如下：
<div id="test4"></div>#test4 {
background-image:url('images/test4-desktop.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test4 {
background-image:url('images/test4-mobile.png');
}
}结果 (The results)
While certainly better than using display:none, this method is a little spotty.
虽然肯定比使用display：none更好，但是这种方法有点参差不齐。
| Tested | Requests Both |
|---|---|
| Android 2.1-3.0? | Yes |
| Android 4.0 | No |
| Blackberry 6.0 | Yes |
| Blackberry 7.0 | No |
| Chrome (16+) | No |
| Chrome Mobile | No |
| Fennec (10.0+) | Yes |
| Firefox (3.6+) | No |
| IE 9+ | No |
| iOS (4.26+) | No |
| Kindle (3.0) | Yes |
| Opera (11.6+) | No |
| Opera Mini (6.5+) | No |
| Opera Mobile (11.5) | No |
| Safari 4.0 | Yes |
| Safari 5.0+ | No |
| 经过测试 | 同时要求 |
|---|---|
| Android 2.1-3.0？ | 是 |
| Android 4.0 | 没有 |
| 黑莓6.0 | 是 |
| 黑莓7.0 | 没有 |
| Chrome(16+) | 没有 |
| Chrome移动版 | 没有 |
| 芬尼(10.0+) | 是 |
| 火狐(3.6+) | 没有 |
| IE 9+ | 没有 |
| iOS(4.26以上) | 没有 |
| Kindle(3.0) | 是 |
| 歌剧(11.6+) | 没有 |
| Opera Mini(6.5+) | 没有 |
| Opera Mobile(11.5) | 没有 |
| Safari 4.0 | 是 |
| Safari 5.0+ | 没有 |
结论 (Conclusion)
I’d avoid it. While the situation is improving, Android 2.x, which dominates the Android marketshare, still downloads both images as does Fennec and the Kindle. Between the three, but particularly because of Android, I would recommend looking at other options.
我会避免的。 尽管情况正在改善，但占据Android市场份额主导地位的Android 2.x仍然像Fennec和Kindle一样下载图像。 在这三个之间，但特别是由于Android，我建议您查看其他选项。
测试五：背景图像，其中桌面图像设置为最小宽度 (Test Five: Background Image Where Desktop Image Set with Min-Width)
In this test, a div is given one background image if the (min-width: 601px) media query matches, and a different one if (max-width: 600px) matches. The HTML and CSS is below:
在此测试中，如果(最小宽度：601像素)媒体查询匹配，则为div分配一张背景图片，如果(最大宽度：600像素)匹配，则给另一张div图片。 HTML和CSS如下：
<div id="test5"></div>@media all and (min-width: 601px) {
#test5 {
background-image:url('images/test5-desktop.png');
width:200px;
height:75px;
}
}
@media all and (max-width: 600px) {
#test5 {
background-image:url('images/test5-mobile.png');
width:200px;
height:75px;
}
}结果 (The results)
The situation here is a little better.
这里的情况要好一些。
| Tested | Requests Both |
|---|---|
| Android 2.1+ | No |
| Blackberry (6.0+) | No |
| Chrome (16+) | No |
| Chrome Mobile | No |
| Fennec (10.0+) | Yes |
| Firefox (3.6+) | No |
| IE 9+ | No |
| iOS (4.26+) | No |
| Kindle (3.0) | No |
| Opera (11.6+) | No |
| Opera Mini (6.5+) | No |
| Opera Mobile (11.5) | No |
| Safari (4+) | No |
| 经过测试 | 同时要求 |
|---|---|
| Android 2.1以上 | 没有 |
| 黑莓(6.0+) | 没有 |
| Chrome(16+) | 没有 |
| Chrome移动版 | 没有 |
| 芬尼(10.0+) | 是 |
| 火狐(3.6+) | 没有 |
| IE 9+ | 没有 |
| iOS(4.26以上) | 没有 |
| Kindle(3.0) | 没有 |
| 歌剧(11.6+) | 没有 |
| Opera Mini(6.5+) | 没有 |
| Opera Mobile(11.5) | 没有 |
| Safari(4+) | 没有 |
结论 (Conclusion)
More browsers play along this time. Fennec, as always, just can’t control itself. Android 2.x is….odd. It requests both images, but only if the screen size is over 600px and the min-width media query kicks in. This behavior appears to stop as of Android 3. This is an odd one and I would love to know why the heck it happens. Actually, good news here. Jason Grigsby pinged me and said his results for this test weren’t jiving with what I reported here, so I re-ran the tests on a few Android 2.x devices. Turns out, my initial results were off: Android 2.x plays nicely and my initial runs of this test on that platform were wrong. Not only is this good news for developers, but it is also a much more sane behavior and it has restored my faith in humanity. Or at least my faith in Android.
这段时间有更多的浏览器在玩。 Fennec一如既往地无法控制自己。 Android 2.x是….odd。 它请求两个图像，但是仅当屏幕尺寸超过600px并且最小宽度媒体查询开始时才出现。此行为似乎在Android 3上停止。这是一个奇怪的现象，我很想知道为什么会发生这种情况。 实际上，这里是个好消息。 杰森·格里格斯比(Jason Grigsby)对我进行了ping操作，并说他在此测试中得到的结果与我在此处报告的内容并不吻合，因此我在一些Android 2.x设备上重新进行了测试。 事实证明，我的最初结果是错误的：Android 2.x可以很好地运行，而我在该平台上对该测试的最初运行是错误的。 这不仅对开发人员来说是个好消息，而且也是一种理智的行为，它恢复了我对人性的信念。 或者至少是我对Android的信念。
It’s also worth nothing that if you use this method, you’ll need to consider alternate options for Internet Explorer 8 and under. Those versions of the browser don’t support media queries, so no image will be applied. Of course, this is simple enough to fix with conditional comments and an IE specific stylesheet.
如果您使用此方法，那么您也需要考虑Internet Explorer 8及以下版本的替代选项，这毫无价值。 这些版本的浏览器不支持媒体查询，因此不会应用任何图片。 当然，这很简单，可以使用条件注释和特定于IE的样式表进行修复。
测试六：无背景图像显示(最大设备宽度) (Test Six: Background Image Display None (max-device-width))
This test was the same as test two, but it used max-device-width for the media query instead of max-width. The HTML and CSS is below:
此测试与测试2相同，但是它对媒体查询使用max-device-width而不是max-width。 HTML和CSS如下：
<div id="test6"></div>#test6 {
background-image:url('images/test6.png');
width:200px;
height:75px;
}
@media all and (max-device-width: 600px) {
#test6 {
display:none;
}
}结论 (Conclusion)
I’m not going to spend much time on this, as it ended up being a throw away test. There were no differences in behavior between this and test two. The test was added because of a tweet where someone had mentioned they were getting different results than the original tests by Cloud Four, but the discrepancy ended up being caused by something else entirely (a typo, if I remember right).
我不会在此花费太多时间，因为它最终成为了一次扔掉的测试。 这与测试两个之间的行为没有差异。 添加该测试的原因是有人在推特上提到他们得到的结果与Cloud Four的原始测试有所不同，但是差异最终完全是由其他原因引起的(如果输入错，我错了)。
测试七：级联覆盖以实现高分辨率 (Test Seven: Cascade Override for High Resolution)
The final test was added to the suite a bit late. With the retina iPad around the corner, there were a lot of posts about how to handle serving images to high-res displays. In one post, Brad Frost mentioned he thought it would be interesting to see test results for this, so I added it in.
最终测试被添加到套件中有点晚。 随着视网膜iPad的到来，有很多关于如何处理向高分辨率显示器提供图像的文章。 布拉德·弗罗斯特 ( Brad Frost)在一篇文章中提到，他认为看到测试结果会很有趣，因此我添加了它。
In this test, a div is given a background image. Then, by using the min-device-pixel-ratio meda query, a new background image was applied if the minimum ratio was 1.5.
在此测试中，给div一个背景图像。 然后，如果最小比例为1.5，则通过使用min-device-pixel-ratio meda查询，应用新的背景图像。
The HTML and CSS are below:
HTML和CSS如下：
<div id="test7"></div>#test7 {
background-image:url('images/test7-lowres.png');
width:200px;
height:75px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#test7 {
background-image:url('images/test7-highres.png');
width:200px;
height:75px;
}
}结果 (The results)
Of all the tests, this one is the one that could benefit the most from having some more people run it. That being said, it does look like the following behavior is accurate.
在所有测试中，通过让更多的人进行测试，可以最大程度地受益于该测试。 话虽如此，看起来以下行为确实正确。
| Tested | Requests Both |
|---|---|
| Android 2.1-3.0? | Yes |
| Android 4.0 | No |
| Blackberry 6.0 | No |
| Blackberry 7.0 | No |
| Chrome (16+) | No |
| Chrome Mobile | No |
| Fennec (10.0+) | No |
| Firefox (3.6+) | No |
| IE 9+ | No |
| iOS (4.26+) | No |
| Kindle (3.0) | No |
| Opera (11.6+) | No |
| Opera Mini (6.5+) | No |
| Opera Mobile (11.5) | No |
| Safari 4.0+ | No |
| 经过测试 | 同时要求 |
|---|---|
| Android 2.1-3.0？ | 是 |
| Android 4.0 | 没有 |
| 黑莓6.0 | 没有 |
| 黑莓7.0 | 没有 |
| Chrome(16+) | 没有 |
| Chrome移动版 | 没有 |
| 芬尼(10.0+) | 没有 |
| 火狐(3.6+) | 没有 |
| IE 9+ | 没有 |
| iOS(4.26以上) | 没有 |
| Kindle(3.0) | 没有 |
| 歌剧(11.6+) | 没有 |
| Opera Mini(6.5+) | 没有 |
| Opera Mobile(11.5) | 没有 |
| Safari 4.0以上 | 没有 |
结论 (Conclusion)
Again, this test could stand to be run a bit more, just to be safe. It looks like this method will work the vast majority of the time. Unfortunately, it appears Android 2.x will download both images if the device pixel ratio is above or equal to 1.5 (or whatever value you set in the media query). So in the case of the above tests, if you’ve got a high resolution device running Android 2.x you’re out of luck.
同样，为了安全起见，该测试可能还会运行更多。 看起来这种方法将在大多数时间起作用。 不幸的是， 如果设备像素比率大于或等于1.5(或您在媒体查询中设置的任何值) ，Android 2.x似乎会下载两个图像。 因此，在上述测试中，如果您有运行Android 2.x的高分辨率设备，那么您就不走运了。
The good news, for now, is that I’m unaware of any Android device with a device pixel ratio over 1.5. So if you’re targeting the retina display iOS devices, you could set your min-device-pixel-ratio to 2 and be safe. And of course, now that I’ve said it, I fully expect the first 3 comments for this post to all correct me and point out the one Android device that just has to prove me wrong.
到目前为止，好消息是我不知道任何设备像素比率超过1.5的Android设备。 因此，如果您以视网膜显示iOS设备为目标，则可以将min-device-pixel-ratio设置为2并保持安全。 当然，既然我已经说过了，我完全希望这篇文章的前3条评论都能纠正我，并指出只需要证明我错了的一个Android设备。
The earliest rounds of this test looked more promising for Android, so this is a bit of a bummer for me. They’re the only browser that seems to mess it up, but they’re also one of the biggest players.
这项测试的最早几轮对于Android来说似乎更有希望，所以这对我来说有点遗憾。 它们是似乎使它混乱的唯一浏览器，但它们也是最大的浏览器之一。
推荐建议 (Recommendations)
If you’re going to hide a content image, you’re not going to be able to do it by setting display:none. I recommend using a Javascript or server-side based approach instead.
如果要隐藏内容图像，则无法通过设置display：none来实现。 我建议改用Javascript或基于服务器端的方法。
If you want to hide a background image, your best bet is to hide the parent element. If you can’t do that, then use a cascade override (like test five above) and set the background-image to none when you want it hidden.
如果要隐藏背景图像，最好的选择是隐藏父元素。 如果您不能这样做，请使用级联替代(例如上面的测试五)，并在希望隐藏背景图像时将其设置为none。
For swapping background images, define them both inside of media queries.
要交换背景图像，请在媒体查询中同时定义它们。
向前走 (Going Forward)
If you run any of the tests and think something above is incorrect, either drop me a line or say report it on GitHub so I can dig into it. The same goes for adding any additional tests.
如果您运行任何测试并且认为以上内容有误，请给我写一行，或者说在GitHub上报告，以便我进行深入研究。 添加任何其他测试也是如此。
翻译自: https://timkadlec.com/2012/04/media-query-asset-downloading-results/
媒体查询常用的四个设备查询
6338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
