内部页面链接在 iOS Safari 浏览器中不起作用

Question

我是编程新手，如果这篇文章写错了，请见谅。我目前正在为 Free Code Camp 的响应式网页设计证书制作产品登陆页面项目。要求之一是将锚链接添加到固定导航栏。链接应该跳转到同一页面内的点。 这些链接在桌面上可以正常工作，但是当我在 iPhone XS 上的 Safari 浏览器中单击这些链接时，它们不起作用。

我还没有在网上找到任何解决方案——人们已经描述了在 Safari 中链接到其他页面时遇到困难，但没有人给出同一页面内链接的解决方案。

body {
  background-color: #ebf4ed;
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
}

#header {
  display: block;
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  min-height: 100px;
  padding: 15px;
  top: 0;
  left: 0;
  z-index: 1;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: white;
  opacity: 0.8;
}

.page-title {
  display: flex;
  font-family: 'Josefin Sans', sans-serif;
}

#header-img {
  display: flex;
  box-sizing: border-box;
  height: 100px;
  width: 150px;
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  width: 200px;
  justify-content: space-between;
  margin-right: 10px;
}

@media(max-width: 550px) {
  #header {
    width: 100%;
    max-height: 100%;
    flex-wrap: wrap;
    display: table;
  }
  .page-title {
    justify-content: center;
  }
  #home-link {
    padding: 0;
    margin: 0;
  }
  #header-img {
    margin: 0 auto;
  }
  nav ul {
    justify-content: space-between;
    padding: 0;
    margin: 0 auto;
  }
}

a {
  text-decoration: none;
  color: black;
}

<div id="header">
  <div class="page-title">
    <a href="#header">
      <h1 class="link" id="home-link">Sequoia Advisors</h1>
    </a>
  </div>

  <div class="logo">
    <img src="https://www.dropbox.com/s/vj3kejb1m10d685/mangrove1.png?raw=1" alt="Sequoia company logo" id="header-img">
  </div>

  <nav id="navbar">
    <ul>
      <li class="nav-link"><a href="#about-title">About</a></li>
      <li class="nav-link"><a href="#pricing-container">Pricing</a></li>
      <li class="nav-link"><a href="#form-container">Contact</a></li>
    </ul>
  </nav>
</div>

锚链接链接到每个部分的标题 ID。我需要他们在移动设备上做出响应——不确定这是 Safari 问题还是一般的移动设备问题。

Answer 1

只是为了说明其他人的评论，即您的代码缺少提供所需结果的代码，我为您的表单和关于部分添加了内部锚链接。添加的内容是虚拟内容，并且故意过大，以便您可以看到“跳转到”效果。我还将标题 css 中的位置从固定调整为相对，以便这些部分正确显示。 （我认为这不是 Safari 的问题，只是缺少内容的问题，您在任何浏览器上都会遇到同样的问题）

希望对你有帮助

body {
  background-color: #ebf4ed;
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
}

#header {
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  min-height: 100px;
  max-height: 150px;
  padding: 15px;
  top: 0;
  left: 0;
  z-index: 1;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: white;
  opacity: 0.8;
}

.page-title {
  display: flex;
  font-family: 'Josefin Sans', sans-serif;
}

#header-img {
  display: flex;
  box-sizing: border-box;
  height: 100px;
  width: 150px;
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  width: 200px;
  height: auto;
  justify-content: space-between;
  margin-right: 10px;
}

#content {
  display: inline-block;
  position: relative;
}

#aboutus,
#form {
  display: block;
  position: relative;
  height: 250px;
}

@media(max-width: 700px) {
  #header {
    display: block;
    width: 100%;
    max-height: 150px;
    flex-wrap: wrap;
    display: table;
  }
  .page-title {
    justify-content: center;
  }
  #home-link {
    padding: 0;
    margin: 0;
  }
  #header-img {
    margin: 0 auto;
  }
  nav ul {
    justify-content: space-between;
    padding: 0;
    margin: 0 auto;
  }
  #content{top:200px} h2 a{margin-top:200px;}
}

a {
  text-decoration: none;
  color: black;
}

<div id="header">
  <div class="page-title">
    <a href="#header">
      <h1 class="link" id="home-link">Sequoia Advisors</h1>
    </a>
  </div>

  <div class="logo">
    <img src="https://www.dropbox.com/s/vj3kejb1m10d685/mangrove1.png?raw=1" alt="Sequoia company logo" id="header-img">
  </div>

  <nav id="navbar">
    <ul>
      <li class="nav-link"><a href="#about-title">About</a></li>
      <li class="nav-link"><a href="#pricing-container">Pricing</a></li>
      <li class="nav-link"><a href="#form-container">Contact</a></li>
    </ul>
  </nav>
</div>
<div id="content">

  <div id="aboutus">
    <h2>About <a name="about-title"></a></h2>
    <p>Hi, we're Stackoverflow users!</p>
  </div>

  <div id="form">
    <h2>MyForm <a name="form-container"></a></h2>
    <p>form goes here</p>
  </div>

</div>

Answer 2

您的代码没有您尝试使用 #about-title #pricing-container #form-container 元素导航的元素。它们必须存在于您的 HTML 中才能提供正确的导航。