我正在构建一个小项目，我已经有很多答案了，所以提前谢谢你。
我现在的问题是让锚标签在移动设备上工作。 锚标签似乎在桌面设备上工作正常，但是当我尝试在iPhone上单击它们时，我没有得到任何结果。
编辑：解释得更好(谢谢Andrei Gheorghiu的建议)： 如果我在台式计算机等设备上打开代码笔，导航栏将按预期工作：它在到达@media查询断点时折叠，并且在宽度<768 折叠时，折叠的导航栏显示切换器图标，所有锚标记都是可单击和工作的(它们将我重定向到div，因为 JavaScript 应该)。 但是，当我在iPhone 7上加载页面时，导航栏按预期折叠，但是单击锚标记并不能让我获得任何地方。
我尝试了Andrei Gheorghiu的两个建议，但他们没有解决问题，至少在我的手机上(非常感谢你，仍然！我真的认为问题与锚标签有关，因为删除处理滚动的 javascript 并将锚标签 hrefs 直接与简单 ID 链接也不起作用。
有什么帮助吗？ 我正在使用引导程序 4，代码笔在这里：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;
});
您似乎没有加载tether(.min).js，这是 Bootstrap 4 所必需的，应该在bootstrap(.min).js之前加载。始终从 Bootstrap 网页(在">易于上手"下)获取最新版本。这很可能会解决您的问题，如果是，请不要采取后续步骤。
如果没有，请记住 IoS 是特殊的。真的很特别。长话短说，您可能还需要将click功能映射到touchend事件。
根据此模型替换每次出现的click()...
$("#inicioMenu").on('click touchend', function(e) {
e.preventDefault();
scrollToAnchor("#inicio");
return false;
});
。很可能会修复它。最重要的部分是preventDefault()，它修复了某些版本的 IoS 设备上scrollTop问题。
此外，请确保您没有将pointer-events:none;设置为<a>标签(因为它会在 IoS 上禁用它们)。
您应该注意，您提供的代码段不是最小、完整和可验证的示例(它不会重现问题)。如果上述一般建议不起作用，则需要使用可验证的示例(或有关您正在测试的设备的更多技术信息)更新您的问题，以便查明原因。
我知道这是一个古老的问题，但我正在回答，以防有人像我一样来寻找答案！
对我来说，这是一个简单的解决方案：指向页面的移动菜单链接将起作用，但不能将锚标签定位到同一页面中的区域。答案是在 a 标记中包含完整的 URL，而不仅仅是锚点。例如 www.yoursite.com/#youranchor(而不是)#youranchor。
希望对某人有所帮助。
以上答案都不适合我，所以我用它来导航
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>
我知道这不是正确的方法，但这肯定是一个快速解决方案。