ipad/iphone 上的 Flexbox 问题

Question

我需要 IOS 用户的帮助 :) 我最近对几年前建立的网站进行了一些更改。它拥有的功能之一是服装配置器，您可以在其中选择服装、颜色和设计。配置器过去使用 javascript 来计算服装的高度，但情况发生了变化，我决定只使用 CSS:

.kit-template {
    display: flex;
    width: 100%;
    height: 200px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 20px auto;

    .svg-document {
        height: 100%;
        width: 100%;
    }

    svg {
        height: 100%;
        width: 100%;
    }

    &.large {
        height: 500px;
    }
}

如你所见，这个使用了flex，看起来很简单。当我最初构建站点时，flex 没有像现在这样受支持。不管怎样，自从我收到关于服装在 iphones/ipads.

上看起来不对的报告

我花了几个小时试图配置一个可以使用 safaris 开发工具的虚拟机。我终于成功了，当我看的时候，它工作得很好哈哈。所以这似乎只是 iPhone/iPad.

上的问题

下面是一个link的实际例子：

https://www.kudos-sports.com/designer/ideas?kitId=4119

如果您在 iPhone/iPad 上查看它，它看起来是错误的并且没有应用我的 CSS。以前有没有人遇到过这种情况，或者有人知道问题出在哪里？我花了太长时间试图让它工作:(

Answer 1

您的 SVG 问题在于您已将 100% 宽度应用于它及其容器。

如果你这样做

.kit-template .svg-document, .kit-template svg { width: auto }

这应该可以解决您的问题。

ipad/iphone 上的 Flexbox 问题

Flexbox issues on the ipad/iphone

css

ios

iphone

ipad

flexbox