Iphone X 的纵横比问题

Posted 2023-02-23

技术标签:

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

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

【问题讨论】：

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

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

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

例如：

iPhone SE 屏幕为320 x 568，因此高度为 50%（和宽度为 100%）的图像将为320 x 284。

iPhone 8 屏幕为375 x 667，因此高度为 50%（和宽度为 100%）的图像将为375 x 333.5。

iPhone X 屏幕为375 x 812，因此50% 的高度（和100% 的宽度）的图像将是375 x 406。

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

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

【讨论】：

兄弟你能给我更多的例子或指导如何设置你的意思吗？因为我对 swift 太陌生了很难在摘要中描述。发布你的图片，我会告诉你不同之处。【参考方案2】：

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

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