html - 我的图标在桌面和开发工具上看起来不错，但在 iPhone 上就被弄脏了

Question

我的页脚图标在 iOS 上垂直模糊。一旦我旋转手机，它们就没问题了，我已经在我的浏览器开发工具上检查了宽高比等，它工作正常……只是在垂直 View 中不在 ios 上。同样，当我旋转手机时它们看起来很好，只是不是垂直的。

知道为什么会这样吗？我假设它在我的一个媒体查询中，我将包括一些可能引起关注的问题。

如果您能提供一些帮助，我将非常感激!

我已经尝试使用 XCode 开发工具来发现问题，但没有解决任何问题。

// Parent to imgLink

const SocialDiv = styled.div`
    height: 100%;
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;    
    align-self: flex-end;

    @media only screen and (max-width: 660px) {
        width: 250px;
    }

    @media only screen and (max-width:497px) {
        width:100%;
    }
`

// Child to Social Div

const imgLink = styled.a`
    height: 100%
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;   
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;

    @media only screen and (max-width: 525px) {
        width: 15%;
        margin: -3%;
        margin-top: 0;
        margin-bottom: 0;
    }

    @media only screen and (max-width:497px) {
          width: 25%;
          justify-content: center;
          margin: 0;
      } 
`
// Child to imgLink

const Img = styled.img`
    height: 100%;
    width: auto;
`

预期的结果是 1x1 的宽高比，现在我的水平比例约为 2:1。

Answer 1

找到它，我有 height: 100% 我绝对应该有一个固定的数量。解决了我的问题!

对于以后阅读本文的任何人，请确保您有专门针对手机尺寸的媒体查询。