Question

我是编程新手，所以如果这篇文章做得不正确，请原谅我。我目前正在从事Free Code Camp的响应式Web设计证书的“产品着陆页”项目。要求之一是将锚链接添加到固定的导航栏。链接应该跳到同一页面中的点。这些链接在桌面上可以正常工作，但是当我在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

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

Answer 2

仅为了说明其他人的评论，您的代码缺少提供所需结果的代码，我为您的表单和about部分添加了内部锚链接。添加的内容是虚拟内容，并且故意过大，因此您可以看到“跳转到”效果。我还将标题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>

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

2 个答案: