1

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

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

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

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

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

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

谢谢！

4

1 回答 1

0

这取决于你想投资什么。您需要以某种方式将所需的信息（图像的渲染宽度）填充到 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 宽、2pxfoo.2px.jpg宽显示等等，以此类推。

如果您有一组有限的图像大小，例如200px,500px并且任意大于500px，那么srcset实际上确实是要寻求的解决方案：

<img srcset="
  foo.large.jpg 501w,
  foo.500px.jpg 500w,
  foo.250px.jpg 250w
">
于 2016-12-19T09:33:59.087 回答