HTTP 客户端提示的替代方案答案

【问题标题】：Alternative to HTTP Client HintsHTTP 客户端提示的替代方案
【发布时间】：2017-01-08 17:38:19
【问题描述】：

我想要实现一个解决方案，让服务器应用返回一张图片，该图片的大小刚好可以在任何给定方向上覆盖整个设备屏幕。

我一直在学习一些关于HTTP Client Hints 方法的知识，在该方法中，浏览器将发送信息以及对图像的请求，例如屏幕尺寸、像素密度等。然后服务器可以解析该信息并返回适当大小的信息图片。

这样我就不必对我现有的图像标签<img src="/myniceimage.jpg" />进行任何修改，额外的信息将与请求一起发送。

不幸的是，似乎对此 HTTP 客户端提示功能的支持有限，请参阅 http://caniuse.com/#feat=client-hints-dpr-width-viewport

我可以看到此功能的唯一替代方法（因此支持不限于 Chrome）是将图像移动到data-src，这样浏览器就不会自动加载它，然后让一些 javascript 函数加载图像手动并在请求的标头中发送屏幕分辨率和像素密度。

是否有其他方法可以将屏幕尺寸和像素密度发送到服务器，而不需要我将图像链接移动到data-src 并让 javascript 函数手动加载它们。或者是否有其他方法让服务器使用所有浏览器发送的现有标头以某种方式推断或估计该信息？

谢谢！

【问题讨论】：

【解决方案1】：

这取决于你想投资什么。您需要以某种方式将所需的信息（图像的渲染宽度）填充到 HTTP 请求中，然后浏览器将其发送回服务器。

除了客户端提示（专门设计用于提供此功能）或使用 Javascript 之外，唯一的方法是劫持 srcset 属性。但请注意，如果您想要像素完美的响应，该解决方案几乎是优雅的：

<img srcset="
  foo.1px.jpg 1w,
  foo.2px.jpg 2w,
  foo.3px.jpg 3w,
  ...
  foo.998px.jpg 998w,
  foo.999px.jpg 999w,
  foo.1000px.jpg 1000w
">

这样，当图像应该是 1 像素宽时，浏览器会请求 foo.1px.jpg，而对于 2 像素宽的显示，浏览器会请求 foo.2px.jpg，等等无限。

如果您有一组有限的图像尺寸，比如200px、500px，并且任意大于500px，那么srcset 实际上确实是解决方案：

<img srcset="
  foo.large.jpg 501w,
  foo.500px.jpg 500w,
  foo.250px.jpg 250w
">

【讨论】：