Bootstrap 5网站标题在iPhone端Safari/Firefox导航栏溢出重叠问题

我使用Bootstrap 5搭建个人作品集网站时，遇到导航栏标题与汉堡菜单重叠、且超出屏幕侧边的问题，该问题仅在iPhone 11的Firefox和Safari浏览器上复现。我已在三星Note、iPad Pro设备上测试，站点运行完全正常，暂无法定位仅iPhone端浏览器渲染异常的原因。

此前导航栏显示正常，我为解决移动端字体过小的问题，参考解决方案在head标签中添加了如下meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1">

该配置修复了移动端字体过小的问题，但仅在iPhone 11的Firefox、Safari浏览器上触发了导航栏异常，站点主体内容显示正常，异常效果见下图：
移动端浏览器（iPhone 11 - Firefox/Safari）

作为对比，相同代码在桌面端浏览器最小窗口下的预期效果如下：
桌面端浏览器

希望定位iPhone 11端渲染异常而其他设备浏览器正常的原因。

Fiddle示例 #

示例链接

HTML代码 #

<nav class="py-3 navbar navbar-custom navbar-expand-lg autohide navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="./assets/logo.svg" class="logo" alt="logo"/>
      George Ciesinski
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#hero">Software Development</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#projects">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
          href="https://georgeciesinski.github.io/blog/">Blog</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Resume
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="assets/PDF/GeorgeCiesinskiResume.pdf" target="_self">PDF</a></li>
            <li><a class="dropdown-item" href="https://georgeciesinski.github.io/resume/">Website</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS代码 #

@media only screen and (max-width: 850px) {
  .container > .navbar-brand .logo {
    font-size: 1rem;
    display: inline-block;
  }

  .navbar-toggler {
    position: absolute;
    top: 0px;
    right: 0px;
    border-color: none;
  }
  .navbar-brand > img {
    margin-right: 0rem;
  }
}

nav {
  background-color: var(--navbar_color);
}

.navbar-brand img {
  max-height: 50px;
}

.navbar-brand {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 900;
}

/* Navbar Site Title */

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: var(--navbar_logo_text);
}

.navbar-custom .navbar-brand:hover {
  color: var(--navbar_logo_text_highlight);
}

/* Navbar Links */

.navbar-dark .navbar-toggler-icon {
  color: var(--navbar_logo_text);
}

.navbar-nav .nav-item .nav-link {
  color: var(--navbar_text);
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
  color: var(--navbar_text_highlight);
}

/* Navbar Dropdown Menu */

.navbar-nav > li > .dropdown-menu {
  background-color: var(--navbar_dropdown);
}

.navbar-nav > li > .dropdown-menu a{
  color: var(--navbar_dropdown_text);
  margin: auto 0px !important;
}

.navbar-nav > li > .dropdown-menu a:hover {
  background-color: var(--navbar_dropdown_hover);
  margin: auto 0px !important;
}

nav ul li a {
  color: #a9a9a9;
  font-size: 22px;
  margin: auto 10px;
}

• 检索相关解决方案，参考了Stack Overflow上Bootstrap移动端导航栏过长的相关问题，对应方案未解决问题
• 查阅Bootstrap 5官方导航栏文档，尝试替换不同的navbar类，尝试设置网站标题在移动端自动缩小字号或自适应适配，均未解决问题

希望导航栏在iPhone端的布局和显示效果与桌面端最小窗口下的效果一致，目前两端字体显示大小一致但定位异常，寻求两端表现统一的解决方案。

根本原因 #

你给.navbar-toggler设置了绝对定位，但没有给父容器nav设置position: relative，iOS端Safari/Firefox对无定位父级的绝对定位元素计算偏移的规则和其他浏览器不一致，同时导航栏标题宽度没有做限制，在iPhone小屏上溢出后和绝对定位的汉堡按钮重叠。

修复步骤 #

1. 给nav标签加上相对定位，给绝对定位的汉堡按钮提供正确的偏移基准，适配iOS的布局规则，在你的CSS中修改nav的样式：

nav {
  position: relative;
  background-color: var(--navbar_color);
  /* 原有其他nav样式保留 */
}

2. 给移动端的navbar-brand加上最大宽度限制，避免标题溢出，同时调整汉堡按钮的偏移适配导航栏内边距，修改你的移动端媒体查询代码：

@media only screen and (max-width: 850px) {
  .container > .navbar-brand .logo {
    font-size: 1rem;
    display: inline-block;
  }
  .navbar-brand {
    max-width: 70%;
    font-size: 18px; /* 可根据实际效果调整大小 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navbar-toggler {
    position: absolute;
    top: 20px; /* 适配nav的py-3内边距，和标题垂直居中对齐 */
    right: 15px; /* 避开容器默认的左右内边距 */
    border: none; /* 原border-color:none是错误写法，替换为border:none */
  }
  .navbar-brand > img {
    margin-right: 0.5rem; /* 可根据实际logo大小调整间距 */
    max-height: 40px; /* 移动端缩小logo高度，避免撑高导航栏 */
  }
}

3. 可选：如果需要兼容iOS的viewport安全区，可以修改meta标签为：
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

修复后iOS端和桌面端的导航栏布局就会保持一致。

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