4

我有一个网络应用程序,它使用基于像素比的媒体查询向客户端设备提供适当分辨率的图像。例如,它将向 Windows 桌面提供 1x 图像,向具有视网膜显示屏的 iPhone 提供 2x 图像。

我有兴趣使用HTML5 应用程序缓存功能使我的 Web 应用程序能够离线使用。为此,您必须创建一个清单文件,其中列出了您的应用所需的所有文件。当用户访问应用程序时,浏览器会获取清单并下载其中列出的所有文件,为离线做准备。

在我看来,这将否定我的媒体查询的意义,因为我必须将 1x 和 2x 图像都放在清单中,并且所有客户端最终都将下载所有图像。

想到的主要解决方案是动态交付清单,使用用户代理嗅探来决定清单应该包含 1x 还是 2x 图像。这对我来说是可行的,但我很好奇还有哪些其他解决方案可以解决这个问题,或者它只是一个已知的限制/怪癖?

4

2 回答 2

0

我自己解决了同样的要求,为此我创建了一个快速中间件,旨在使用或不使用 AppCache 和/或 Cordova,支持 prefix-dpi-suffix(例如 file@2x.jpg)语法。

您可以将它与内容图像、包含媒体查询的 css 文件或任何其他文件一起使用,只需将 @[num]x 添加到您的文件中,它将提供该文件而不是“普通”文件(您可以使用自己的前缀和后缀字符串)。

这意味着当浏览器在设备像素比为 2 的设备上请求名为 mypic.png 的文件时,中间件实际上会首先尝试服务 mypic@2x.png,并且只有当它不存在时才会服务 mypic .png。

静电密集

静态密集演示


更新

使用Service Workers可以实现更优雅的解决方案,目前并非所有浏览器都支持。

http://caniuse.com/#feat=serviceworkers

于 2015-04-30T17:26:21.670 回答
0

我有一种预感,您可以使用媒体查询来选择性地仅下载每个特定设备所需的图像。过去的结果表明,媒体查询只会尝试下载需要的图像,前提是可以合理地假设不需要某些图像。该页面底部的测试七似乎与您的问题非常相关。

您可以使用像素比媒体查询创建一个 CSS 文件并将其列在清单文件中,然后在设备上检查它是否实际下载了不必要的图像资源。

于 2014-10-14T16:08:15.587 回答