您如何使网站标题适合移动浏览器？

Question

问题

我正在尝试使用 bootstrap 5 构建一个投资组合网站，并且在显示标题的导航栏上遇到问题，因此它与汉堡菜单重叠并离开了屏幕的一侧。此问题仅在我的 iPhone 11 上的 Firefox 和 safari 上发生。我已经在三星 Note 和 iPad pro 上测试了我的网站，两者都运行良好。它在我下面链接的小提琴中也能正常工作。我不明白为什么只有我 iPhone 上的浏览​​器不能正确呈现。

导航栏过去显示正确，但我注意到我网站的字体在移动设备上看起来太小并搜索了解决方案。我发现this question 堆栈溢出建议将以下元标记添加到头部：

<meta name="viewport" content="width=device-width, initial-scale=1">

这解决了我在移动设备上的字体大小问题，但导航栏开始表现不正确，特别是在我的 iPhone 11 上的 firefox 和 safari 上。网站的主体看起来不错，但导航栏看起来像这样：

移动浏览器（iPhone 11 - firefox/safari）

为了比较，下面是在最小浏览器尺寸的桌面浏览器上显示的相同代码。应该是这样的：

桌面浏览器

所以我想弄清楚为什么 iPhone 11 呈现错误，而其他设备和浏览器却正确呈现。

代码

小提琴

https://jsfiddle.net/GeorgeCiesinski/6c579nt4/8/

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;
}

尝试的解决方案

我已经搜索了一个解决方案，并在堆栈溢出时找到了 this question，但该解决方案对我不起作用。

我还搜索了有关导航栏的 bootstrap 5 文档，并尝试使用不同的导航栏类。我寻找了一种方法来使浏览器上的网站标题的字体大小更小，或者动态调整大小以适应。我尝试的问题或示例都没有为我解决问题。

理想的解决方案

我希望我的导航栏具有与桌面浏览器上的导航栏屏幕截图相同的布局和外观。屏幕截图中的字体大小看起来相同，但定位错误。如果有一种解决方案可以使它们在两者上的行为方式相同，那将是理想的。

Answer 1

当我实际访问手机上的链接而不是我的 chrome 浏览器上的开发工具时，我才看到您的问题。但是，在这种情况下，我会在导航栏元素中使用 media queries。对于标准移动浏览器，您的媒体查询应该是这样的。

@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;
  }
}

显然，您可以根据需要随意更改此设置，因为我看不到直接前端在小提琴或手机上的外观，但这会让您走上正轨。