锚标签在移动设备上不起作用

Posted 2023-03-25

技术标签:

【中文标题】锚标签在移动设备上不起作用【英文标题】：Anchor tag not working on mobile 【发布时间】：2017-11-24 23:39:47 【问题描述】：

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

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

编辑：更好地解释（感谢 Andrei Gheorghiu 的建议）：如果我在台式计算机等设备上打开 codepen，导航栏按预期工作：它在到达@media 查询断点时折叠，在宽度

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

有什么帮助吗？我正在使用 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;
);

【问题讨论】：

我该如何回答这个问题？ 【参考方案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 上禁用它们）。

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

【讨论】：

感谢您的帮助！我尝试了你的建议，但遗憾的是它们对我没有用（假设我没有做错什么）。我更新了代码（切换了 click() 部分并添加了 tether.js），问题仍然存在。【参考方案2】：

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

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

希望对某人有所帮助。

【讨论】：

【参考方案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>

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

【讨论】：