锚标签不适用于移动设备
[英]Anchor tag not working on mobile
问题描述
I'm building a small project and I've got a lot of answers here already, so thank you in advance.
我正在构建一个小项目，我已经在这里得到了很多答案，所以提前谢谢你。
My problem now is getting the anchor tags to work on mobile devices.我现在的问题是让锚标签在移动设备上工作。 The anchor tags seems to work fine on desktop devices but when I try to click them on an iPhone I get no results.锚标签在桌面设备上似乎工作正常，但是当我尝试在 iPhone 上单击它们时，我没有得到任何结果。
EDIT: Explaining better (thank you Andrei Gheorghiu for the advice): If I open the codepen on a device like my desktop computer, the navbar works as expected: it collapses as it reaches the @media queries breakpoints, and upon collapsing with width < 768, the collapsed navbar shows the toggler icon and all the anchor tags are clickable and working (they redirect me to the div as the JavaScript should).编辑：解释得更好（感谢 Andrei Gheorghiu 的建议）：如果我在台式机等设备上打开 codepen，导航栏会按预期工作：它会在到达 @media 查询断点时折叠，并在折叠时宽度 < 768，折叠的导航栏显示切换器图标，并且所有的锚标记都是可点击和工作的（它们像 JavaScript 那样将我重定向到 div）。 When I load the page on my iPhone 7, however, the navbar is collapsed as expected, but clicking on the anchor tags doesn't get me anywhere.然而，当我在 iPhone 7 上加载页面时，导航栏按预期折叠，但单击锚标记并没有让我到任何地方。
I tried Andrei Gheorghiu's both suggestions but they didn't solve the problem, at least on my phone (thank you very much, still!).我尝试了 Andrei Gheorghiu 的两个建议，但他们没有解决问题，至少在我的手机上（非常感谢，仍然！）。 I really think the problem is related to the anchor tag, as removing the javascript dealing with the scrolling and linking the anchor tags hrefs directly with simple IDs didn't work either.我真的认为问题与锚标记有关，因为删除处理滚动的 javascript 并将锚标记 href 直接与简单的 ID 链接起来也不起作用。
Any help?有什么帮助吗？ I'm using bootstrap 4, the codepen is here: https://codepen.io/diegomengue/pen/VWWjpj .我正在使用 bootstrap 4，codepen 在这里： https ://codepen.io/diegomengue/pen/VWWjpj。
HTML: 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: 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: 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;
});
3 个解决方案
解决方案1
3 2017-06-21 22:10:30
You seem to not have loaded tether(.min).js , which is required by Bootstrap 4 and should be loaded before bootstrap(.min).js .您似乎没有加载tether(.min).js ，这是 Bootstrap 4 所需的，应该在bootstrap(.min).js之前加载。 Always get the latest version from Bootstrap webpage (under Easy to get started ).始终从Bootstrap 网页（在Easy to get started 下）获取最新版本。 That will, most likely, fix your problem and, if it does, do not take the next steps.这很可能会解决您的问题，如果确实如此，请不要采取后续步骤。
If it doesn't, remember IoS is special.如果没有，请记住 iOS 是特殊的。 Really special.真的很特别。 Long story short, you probably need to map click functionality to touchend event as well.长话短说，您可能还需要将click功能映射到touchend事件。
Replacing each occurrence of click() according to this model...根据此模型替换每次出现的click() ...
$("#inicioMenu").on('click touchend', function(e) {
e.preventDefault();
scrollToAnchor("#inicio");
return false;
});
... will, most likely, fix it. ......很可能会修复它。 The most important part is the preventDefault() , which fixes scrollTop issues on some versions of IoS devices.最重要的部分是preventDefault() ，它修复了某些版本的 iOS 设备上的scrollTop问题。
Also, make sure you're not setting pointer-events:none;另外，请确保您没有设置pointer-events:none; to your <a> tags (because it would disable them on IoS).到您的<a>标签（因为它会在 IoS 上禁用它们）。
You should note the snippet you provided is not a Minimal, Complete and Verifiable Example (it doesn't reproduce the problem).您应该注意您提供的代码段不是最小的、完整的和可验证的示例（它不会重现问题）。 If the above general advice does not work, you need to update your question with a verifiable example (or with more technical info about the device you're testing on) so the cause could be pinpointed.如果上述一般建议不起作用，您需要使用可验证的示例（或有关您正在测试的设备的更多技术信息）更新您的问题，以便可以查明原因。
解决方案2
2 2018-12-19 21:34:25
I know this is an old question but I'm answering in case someone comes looking for an answer like I did!我知道这是一个老问题，但我会回答，以防有人像我一样来寻找答案！
For me it was an easy fix: mobile menu links to pages would work but not anchor tags to areas within the same page.对我来说，这是一个简单的解决方法：指向页面的移动菜单链接可以工作，但不能将标签锚定到同一页面内的区域。 The answer was to include the full URL in the a tag, not just the anchor.答案是在 a 标签中包含完整的 URL，而不仅仅是锚点。 Eg www.yoursite.com/#youranchor (instead of) #youranchor.例如 www.yoursite.com/#youranchor（而不是）#youranchor。
Hope that helps someone.希望能帮助某人。
解决方案3
0 2020-11-27 13:57:24
None of the above answers worked for me so I used this for navigation以上答案都不适合我，所以我用它来导航
onclick="window.location.href = './about.html';
Earlier my code was like below早些时候我的代码如下
<li>
<a class="dropdown-item" href="./about.html"> About</a>
</li>
but the anchor was not working on mobile.但主播不在手机上工作。 then i made it to然后我做到了
<li onclick="window.location.href = './about.html';">
<a class="dropdown-item" href="./about.html"> About</a>
</li>
I know this is not the right way but this can be a quick fix for sure.我知道这不是正确的方法，但这肯定可以快速解决。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.