iPad端CSS导航栏间距异常问题求助

我的网站CSS导航栏在iPad端显示时，导航项间距排布异常，但桌面端和笔记本端显示正常。谷歌浏览器响应式测试显示无问题，暂未测试其他平板设备。我尝试调整.nav-links的gap属性，但没有任何效果，想问是否需要通过媒体查询做针对性调整？

CSS代码 #

nav {
    display: flex;
    position: fixed;
    background-color: black;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    padding-bottom: 5px;
    z-index: 100000;
  }
  
.nav-links {
    font-weight: 600;
    display:flex;
    gap: 1em;      
}

HTML代码 #

<nav>
  <div class='nav-logo'>
    <a href="index.html#top"><img src='images/White_on_Transparent.png' id='nav-img'></a>
  </div>
  <ul class='nav-links'>
    <li class="dropdown">
      <a href="#SERVICES"><button class="dropdown-button">SERVICES</button></a>
    </li>
    <li><a href="index.html#about-me">ABOUT ME</a></li>
    <li><a href="index.html#PORTFOLIO">PORTFOLIO</a></li>
    <li><a href="#FOOTER">CONTACT</a></li>
  </ul>    
</nav>

显示效果截图 #

• 桌面端正常显示：
• iPad端异常显示：

内容的提问来源于stack exchange，提问作者Michael