Html 我的图标在桌面和开发工具上看起来很好，但在iPhone上会弄脏一次

我的页脚图标在ios上垂直涂抹。一旦我旋转手机，它们就没事了，我已经在我的浏览器开发工具上检查了纵横比等等，它工作正常……只是在垂直视图的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。

找到了，我的身高：100%，我肯定应该有一个固定的高度。修正了我的问题

对于将来阅读本文的任何人，只需确保您有专门针对手机尺寸的媒体查询