Question

我正在建立一个小项目，我已经在这里得到了很多答案，所以提前谢谢你。

我现在的问题是让锚标签在移动设备上运行。锚标签似乎在桌面设备上正常工作，但是当我尝试在iPhone上点击它时，我没有得到任何结果。

编辑：更好地解释（谢谢Andrei Gheorghiu的建议）：如果我在台式计算机之类的设备上打开codepen，导航栏就会按预期工作：它在到达@media查询断点时折叠，并在折叠宽度＆lt; 768，折叠的导航栏显示切换器图标，并且所有锚标签都是可点击的并且正在工作（它们将我重定向到JavaScript应该是div）。然而，当我在iPhone 7上加载页面时，导航栏按预期折叠，但是点击锚标签不会让我随处可见。

我尝试了Andrei Gheorghiu的两个建议，但他们没有解决问题，至少在我的手机上（非常感谢，仍然！）。我真的认为这个问题与锚标签有关，因为删除处理滚动的javascript并直接用简单的ID链接锚标签hrefs也不起作用。

有任何帮助吗？我正在使用bootstrap 4，codepen在这里：https://codepen.io/diegomengue/pen/VWWjpj。

HTML：

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

<body> 
  <nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'>
    <button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="navbar-collapse collapse" id="navbarNav">
    <ul class='navbar-nav mx-auto'>
      <li class='nav-item mx-auto'><a href='#' id='inicioMenu' class='nav-link'><strong>Diego Mengue</strong></a></li>
      <li class='nav-item mx-auto'><a href='#' id='portfolioMenu' class='nav-link'>Portfólio</a></li>
      <li class='nav-item mx-auto'><a href='#' id='contatoMenu' class='nav-link'>Contato</a></li>
    </ul>
    </div>
  </nav>         
</body>

CSS：

body {
  background-color: #EAEDFB;
  color: white;
  font-size: 20px;


.navbar{
  background-color: #6F7ECC;
  top: 0.5em;
  width: 74%;
}

li {
  padding: 0.3em 0.3em 0.3em 0.3em;
  margin: 0 0.3em 0 0.3em;
}

a {
  color: white;
  pointer-events: auto;
}

a:link {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
  text-decoration: none;
}

a:hover {
  color: #D9DDF3;
  text-decoration: none;
}
a:active {
  color: white;
  text-decoration: none;
}

form {
  margin-bottom: 0.5em;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2.5em;
}
h4 {
  font-size: 1.5em;
}

h5 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

p {
  font-size: 1em;
}

.vertical-align {
  display: flex;
  align-items: center;
}

#icone {
  width:  2.5em;
  margin: 0 0.6em 0 0.6em;
}

hr {
  background-color: white;
}

h1, h2 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#divPortfolio {
  height: 800px;
}

.text-right {
  margin-right: 0.3em;
}

footer {
  background-color:#6F7ECC;
  width: 74%;
  text-align: center;
}

::-webkit-input-placeholder {
   font-size: 1em!important;
}

:-moz-placeholder { /* Firefox 18- */
      font-size: 1em!important;
}
::-moz-placeholder {  /* Firefox 19+ */
      font-size: 1em!important;
}

@media screen and (min-width: 0px) {
  body {font-size: 10px;}
  .navbar {font-size:1.2em;}
  footer {font-size: 0.6em; height: 5em; padding-top: 1.4em;}
  h4 {margin-top: 1em;}
}

@media screen and (min-width: 768px) {
  body {font-size: 13px;}
  .navbar {font-size: 1.2em;}
  footer {font-size: 1em;  height: 3em;
  padding-top: 1.4em;}
  h4 {margin-top: 0em;}
  }

@media screen and (min-width: 992px) {
  body {font-size: 14px;}
}

@media screen and (min-width: 1200px) {
  body {font-size: 16px;}
}

JS：

var mq = window.matchMedia( "(min-width: 768px)" );

function scrollToAnchor(aid){
    var aTag = $(aid);
  if (mq.matches) {
    $('body').animate({scrollTop: (aTag.offset().top)-82},'slow');
  } else {
    $('body').animate({scrollTop:(aTag.offset().top)-180},'slow');
  }
};

   $("#inicioMenu").on('click touchend', function(e) {
  e.preventDefault();
  scrollToAnchor("#inicio");
  return false;
});

$("#portfolioMenu").on('click touchend', function(e) {
  e.preventDefault();
  scrollToAnchor('#portfolio');
  return false;
});

$("#contatoMenu").on('click touchend', function(e) {
  e.preventDefault();
   scrollToAnchor('#contato');
  return false;
});

Answer 1

您似乎没有加载tether(.min).js，这是Bootstrap 4所要求的，应该在bootstrap(.min).js之前加载。始终从Bootstrap webpage获取最新版本（在易于使用下）。这很可能会解决您的问题，如果确实如此，请不要采取下一步措施。

如果没有，请记住IoS是特殊的。真的特别。简而言之，您可能还需要将click功能映射到touchend事件。

根据此模型更换click()的每个匹配项...

$("#inicioMenu").on('click touchend', function(e) {
  e.preventDefault();
  scrollToAnchor("#inicio");
  return false;
});

...很可能会修复它。最重要的部分是preventDefault()，它修复了某些版本的IoS设备上的scrollTop问题。

另外，请确保您没有将pointer-events:none;设置为<a>标记（因为它会在IoS上禁用它们）。

您应该注意，您提供的代码段不是Minimal, Complete and Verifiable Example（它不会重现问题）。如果上述一般性建议不起作用，您需要使用可验证的示例（或者有关您正在测试的设备的更多技术信息）更新您的问题，以便找出原因。

Answer 2

我知道这是一个古老的问题，但是我正在回答，以防有人像我一样寻找答案！

对我来说，这是一个简单的解决方法：指向页面的移动菜单链接有效，但不能将标签锚定至同一页面内的区域。答案是在标签中包含完整的URL，而不仅仅是锚。例如。 www.yoursite.com/#youranchor（而不是#youranchor）。

希望能帮助某人。

Answer 3

以上答案均不适合我，因此我将其用于导航

onclick="window.location.href = './about.html';

以前我的代码如下

 <li>
<a class="dropdown-item" href="./about.html"> About</a>
</li>

，但锚无法在移动设备上运行。然后我就做到了

 <li onclick="window.location.href = './about.html';">
<a class="dropdown-item" href="./about.html"> About</a>
</li>

我知道这不是正确的方法，但是可以肯定这是一个快速解决方法。

锚标签无法在移动设备上运行

3 个答案: