html – 为高分辨率显示器(主要是iOS视网膜显示器)处理高分辨率网络图像的正确方法是什么？

概述我有一个利用jQuery Mobile的移动网站,但坦率地说,这些图像看起来像是iPhone 4 / 4S上的废话.我认为本周晚些时候可用的“新iPad”也是如此. 我知道这与像素比率和/或图像DPI(或PPI或你想要称之为的任何东西)有关…让我们不讨论这个问题.我只想知道为这些iOS视网膜显示器提供高分辨率网页图像的最佳方法是什么. 起初,我认为改变图像DPI(在Photoshop中)可以解决问 我有一个利用jquery Mobile的移动网站,但坦率地说,这些图像看起来像是iPhone 4 / 4S上的废话.我认为本周晚些时候可用的“新iPad”也是如此.

我知道这与像素比率和/或图像DPI(或PPI或你想要称之为的任何东西)有关…让我们不讨论这个问题.我只想知道为这些iOS视网膜显示器提供高分辨率网页图像的最佳方法是什么.

起初,我认为改变图像DPI(在Photoshop中)可以解决问题.我拍了一些样本图像并将它们缩小到190px的宽度.我以72 DPI保存了一张图像,另一张图像保存在200 DPI.这没有效果.自己查看(在iPhone 4 / 4S上)：http://haxway.com/restest/1.html每个的底部图像是200 DPI.

然后,我没有将高分辨率图像保存在200 DPI,而是再次将其保存在72 DPI,但这次我增加了宽度(达到528px),这样当缩小到190px的宽度时,它将达到~200 DPI.这似乎可以解决问题：http://haxway.com/restest/2.html如果您查看源,您可以看到我在图像标签上强制宽度/高度(< img src =“w4.jpg”alt =“”wIDth =“190”height = “143” &GT). 但是,我不相信这是最好的解决方案.不使用宽度/高度属性来缩放图像会影响渲染性能,因为设备必须缩放图像而不是仅加载它(而不是进一步触摸它)？ 经过一些研究,看起来有一些CSS媒体查询,如-webkit-min-device-pixel-ratio [1],你可以使用不同的CSS进行高分辨率显示,从而在CSS中加载更高分辨率的图像.但我需要定位HTML< img>标签.我读过的另一篇文章(遗憾地丢失了链接)建议使用JavaScript来替换高分辨率的“常规”图像.这听起来很疯狂！

有没有更好的方法来解决这个问题？我意识到哪些是“最好的”方式可能会有所不同.如果可以解释每种方法的优点/缺点,那就太棒了！我的目标是使用任何方法呈现最快(希望不使用一些Hacky JavaScript等).

谢谢！

[1] http://aralbalkan.com/3331

解决方法 您将需要运行某种形式的j作为解决方案.目前选择使用的是席卷wilcox.它将为屏幕提供正确的图像.此解决方案的一大优点是它可以缓存图像以减少用户的负担.

http://adaptive-images.com/

有一个新的图片HTML元素,可以采取多种来源来克服这个问题,但它还有一段路要走.

http://www.w3.org/community/respimg/

总结

以上是内存溢出为你收集整理的html – 为高分辨率显示器(主要是iOS视网膜显示器)处理高分辨率网络图像的正确方法是什么？全部内容，希望文章能够帮你解决html – 为高分辨率显示器(主要是iOS视网膜显示器)处理高分辨率网络图像的正确方法是什么？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。