Iphone X 的纵横比问题答案

【问题标题】：Aspect ratio issues with Iphone XIphone X 的纵横比问题
【发布时间】：2018-08-02 15:26:14
【问题描述】：

我通过创建具有纵横比的约束设置在情节提要上开发了大部分 UI。现在我发现在 iphone X 上，所有带有比例的约束看起来都被拉伸且不正确。使用最适合所有 iphone 尺寸的纵横比设置约束的最佳解决方案是什么？

【问题讨论】：

在使用纵横比时，元素没有理由“看起来拉伸且不正确”。举例说明你在说什么？
@DonMag，例如，我将背景图像设置为超级视图（整个屏幕）的 50% 高度，在背景图像上方还有另一个较小的图像设置为背景图像的 30% 高度。在普通 iphone 上，比例还可以，但在 iphone X 上，图像变得拉伸，因为 iphone X 提供的比例与其他手机不同

【解决方案1】：

您将“纵横比”与“百分比”混淆了。

如果您希望背景图片在尺寸变化时看起来不会“拉伸”，您需要为其指定纵横比 + 百分比尺寸，或者使用不同的图片。

例如：

很明显，你的图片不能是320 x 284 和 375 x 333.5 和 375 x 406 all at同一时间。

除了将图像视图设置为屏幕高度的 50% 之外，您可能需要将其限制在屏幕的整个宽度范围内，并给它一个Aspect Ratio 限制条件。它不会在每台设备上覆盖相同的百分比高度（不要忘记 iPad 尺寸），但看起来不会被拉伸。

【讨论】：

【解决方案2】：

我不确定其他人为此做了什么，但我为解决这个问题所做的就是设置size（高度和宽度）约束而不是aspect ratio 约束。这可能会导致它在不同屏幕上的大小略有不同，但纵横比保持不变。

例如，不要在方形视图上设置aspect ratio 约束，请尝试将height 和width 的约束设置为相等的值，例如250 和250。

【讨论】：