将 html5 appcache 与媒体查询一起使用以获取像素比答案

【问题标题】：Using html5 appcache with media queries for pixel ratio将 html5 appcache 与媒体查询一起使用以获取像素比
【发布时间】：2014-12-06 02:25:24
【问题描述】：

我有一个网络应用程序，它使用media queries based on pixel ratio 向客户端设备提供适当分辨率的图像。例如，它将 1x 图像传送到 Windows 桌面，将 2x 图像传送到具有视网膜显示屏的 iPhone。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

更新

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

【讨论】：

【解决方案2】：

我有一种预感，您可以使用媒体查询有选择地仅下载每个特定设备所需的图像。过去的结果表明media queries will only attempt to download images that are needed，如果可以合理地假设不需要某些图像。该页面底部的测试七似乎与您的问题非常相关。

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

【讨论】：

感谢您的回复！你是对的，这就是当今 Web 应用程序的行为方式。但问题是我认为清单文件不仅需要列出我的 CSS 文件，还需要列出 CSS 引用的所有图像（1x 和 2x）。清单文件不区分 1x 和 2x，因此浏览器将下载所有这些，否定您提到的选择性下载。我必须承认，这是基于阅读离线/应用缓存功能如何工作的推测。我会尝试敲出一个简单的测试页面来证明问题存在。