如何为支持视网膜显示的 ipad 应用程序设置图像

Posted 2023-02-24

【中文标题】如何为支持视网膜显示的 ipad 应用程序设置图像

【英文标题】：how to set image for ipad application that support retina display

【发布时间】：2012-03-29 06:46:59

【问题描述】：

我需要更新我的应用程序，以便它可以支持新 iPad 中的视网膜显示，但我对此仍有一些疑问。我们必须创建一个支持视网膜显示分辨率的新图像，并且在没有视网膜显示支持的情况下仍然保留应用程序的最后一个图像，这对吗？如果是，那么我们的应用程序会很大，对吧？有没有办法让它只是一个？也许只使用高​​分辨率图像，但为常规应用程序（不支持视网膜显示的应用程序）调整它们的大小。有人可以帮帮我吗？

【参考方案1】：

您必须创建两个图像。一种用于旧分辨率，一种用于视网膜显示。 如果我记得，您只需在视网膜图像上添加@x2：

mypicture.jpg  (old display)

[e-mail]  (retina display)

我希望，这种方式类似于iphone。

【讨论】：

嗨！我不确定这种方式是否会一直有效，我读过一些关于此的内容。也许它适用于 SDK 但不适用于 rof 网页。你确定吗？否则，我可以通过发布一个模仿该行为的小 js 脚本来提供帮助。它还取决于 Risma 对“应用程序”的含义。如果它真的是一个“应用程序”或者只是一个响应式网站。无论如何，让我知道。

是的，你是对的。这种方式仅适用于 ios 应用程序。对于网络，我没有看到。

那么，@Risma：您只需要应用代码还是网络/响应代码？

@x2 不是只适用于 PNG（至少是自动检测机制）？

【参考方案2】：

对于网络，您仍然可以使用@2x 命名约定。 声明背景图片并设置大小。 在视网膜显示媒体查询中调用高分辨率图像。

figurebackground-image:url(../img/imageName.png);background-size:57px 57px;

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) 

figurebackground-image:url(../img/[e-mail]);

也有服务器端解决方案，这里有一个：Link