html - 替代 HTTP 客户端提示

Question

我想实现一个解决方案，其中服务器应用程序返回一张大到足以在任何给定方向覆盖整个设备屏幕的图像。

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

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

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

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

---

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

谢谢!

Answer 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
">

这样浏览器请求 foo.1px.jpg 当图像应该是 1px 宽时，foo.2px.jpg 应该是 2px 宽显示等等 无穷无尽。

如果您有一组有限的图像尺寸，例如 200px、500px 以及任意大于 500px 的尺寸，则 srcset 实际上确实是解决方案:

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