如何在每种显示分辨率（平板电脑、手机等）上显示 2D 图像？

Question

我已经编程了一段时间，但我最近才开始为手机和平板电脑开发应用程序。我正在使用 Marmalade 为平板电脑和手机开发跨平台应用程序。 但我的问题更多的是概念性而非技术性。

首先让我向您介绍一下我的应用程序。我想开发一个向孩子们介绍动物的应用程序。每只动物都有一个小故事。我设计了 1072 x 768 尺寸的每只动物。由于我所有的设计都是矢量，因此我可以非常轻松地更改图形的尺寸。

我的问题是我应该如何开发我的应用程序以在所有设备上完美显示？新 iPad 的 Retina 显示屏为 2048 x 1536，iPad 2 和 iPad 1 分辨率为 1024 x 768，iPhone 分辨率为 960 x 640，三星 Galaxy Tab 分辨率为 1280 x 800 等等（不同设备（平板电脑或手机）有不同分辨率）

克服这个问题只有两种选择，AFAK：

1- 设计多种布局（960 x 640 和 1024 x 768）并根据每个设备切换到最接近的分辨率并在屏幕上拉伸布局。在这种情况下，Galaxy Tab 用户会看到稍微变形的图像，而 iPad 2 用户会看到完美的图像。

2- 根据显示大小重新排列我的图形图层，而不是有多个固定布局可供选择。实现这一点有点困难，我必须将图像更改为略大于 1024 x 768，因此根据最终平台，如果需要，我可以显示隐藏的部分。

你们觉得呢？我需要使用哪种方法？有没有其他方法可以解决这个问题？

Answer 1

我不能代表 Android，但 iOS 图形渲染与分辨率无关（基于每个设备系列）。虽然，您面临的主要挑战是渲染矢量图像，因为 iOS 选择的图像文件是 PNG。没有内置的 SVG 渲染器，但有 an attempt 可以尝试解决这个问题（尽管根本不支持渐变）。基于 CoreGraphics 或 UIKit 的实现将以 1024x768 点渲染 1024x768 图像，无论屏幕是否可能保持 2048x1536 像素，因为它以点而不是像素运行。

虽然您是对的，但某些外形尺寸需要进行更改（对于基于 iOS 的设备，您至少需要 2 个，对于 android 外形尺寸可能需要 3 或 4 个）。您不必根据屏幕的确切规格设计图形，而是支持各种宽高比。

Answer 2

在对该主题进行了更多研究后，我找到了解决不同分辨率和纵横比问题的方法。我想与您分享我的计划，但请注意这不是解决问题的通用方法。这只是我决定为这个特定项目处理这个问题的方式。

首先让我们看看我们正在处理什么。 Here 是市场上所有常见的智能手机和平板电脑的列表。使用this article，您可以轻松找到每种分辨率的纵横比。

在研究了这个列表后，我意识到我必须处理的最大纵横比是 16:9 (~1.77)，而最低纵横比是 4:3 (~1.33)。另外我必须处理的最大分辨率是 2048×1536（iPad 3 或新 iPad）

所以我决定设计尺寸为 2760×1536 的图形，它保留 16:9 (~1.77) 的纵横比，但我的重要精灵和图形只应放置在 2048 像素（4:3 或 ~1.33 纵横比或最低纵横比）。

换句话说，我的背景填充了所有 2760 像素的宽度，但我的精灵和图形是必不可少的，并且所有不同设备中的所有用户都必须查看它应该放置在 2048 像素宽度中，保持 3:4 的纵横比（最低纵横比）

然后根据每个屏幕分辨率，我只需要调整我的图形大小以适应设备分辨率。对于具有 1024×600 分辨率（16:9 纵横比）的 Android 设备，我只需将图形大小调整为设备分辨率。对于 iPad 3，我根本不需要调整图形的大小。等等。同样重要的是，在所有设备中，我在屏幕中心水平显示图形，因为我的屏幕的右边距和左边距不包含任何重要的图形或精灵。

这个答案也发布在果酱论坛here。

Answer 3

如果您只是为 iOS 开发，您可以在创建 ipa 时禁用原生分辨率支持。此选项可让您在 iPad 上显示 2x 按钮，这将拉伸您的应用，如果您使用矢量图形，它看起来会很好。
另一种方法是针对不同的屏幕尺寸使用不同的资源，就像我以前在 Android 中所做的那样。