我想要实现一个解决方案，其中服务器应用程序返回的图像足够大，可以覆盖任何给定方向的整个设备屏幕。
我一直在学习shop-item方法，其中浏览器将发送信息以及图像请求，例如屏幕大小，像素密度等。然后服务器可以解析该信息并返回适当大小的图像。
这样我就不必对现有的图像标记/shop/进行任何修改，额外的信息将随请求一起发送。
不幸的是，似乎对此HTTP客户端提示功能的支持有限，请参阅http://caniuse.com/#feat=client-hints-dpr-width-viewport
我可以看到此功能的唯一替代方法（因此支持不仅限于Chrome）将图像移动到HTTP Client Hints，因此浏览器不会自动加载它，然后加载一些javascript函数手动显示图像，并在请求的标题中发送屏幕分辨率和像素密度。
是否有其他方法可以将屏幕尺寸和像素密度发送到服务器，而不需要我将图像链接移动到<img src="/myniceimage.jpg" />并手动加载javascript函数。或者是否有其他方法让服务器使用所有浏览器发送的现有标头以某种方式推断该信息或估计它？
谢谢！
答案 0 :(得分：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
">
这样，当图片宽度为1px时，浏览器会请求foo.1px.jpg，{2}展示广告时foo.2px.jpg，等等 ad infinitum 。
如果你有一组有限的图像尺寸，比如200px，500px，并且任意大于500px，那么srcset实际上确实是解决问题的方法：
<img srcset="
foo.large.jpg 501w,
foo.500px.jpg 500w,
foo.250px.jpg 250w
">