个人中心
gpt4 book ai didi

jquery - anchor 标记在移动设备上不起作用

转载 作者：行者123 更新时间：2023-12-01 07:42:50 24 4
gpt4 key购买 nike

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

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

<小时/>

编辑:更好地解释(谢谢 Andrei Gheorghiu 的建议):如果我在桌面计算机等设备上打开 codepen，导航栏会按预期工作:它会在到达 @media 查询断点时折叠，并且在宽度 < 768 折叠时，折叠的导航栏会显示切换器图标和所有 anchor 标记是可点击的并且可以工作(它们将我重定向到 div，就像 JavaScript 应该的那样)。然而，当我在 iPhone 7 上加载页面时，导航栏按预期折叠，但单击 anchor 标记却无法到达任何位置。

我尝试了 Andrei Gheorghiu 的两个建议，但它们没有解决问题，至少在我的手机上是这样(仍然非常感谢!)。我确实认为问题与 anchor 标记有关，因为删除处理滚动的 javascript 并直接使用简单 ID 链接 anchor 标记 href 也不起作用。

<小时/>

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

最佳答案

您似乎还没有加载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() ，它修复了 scrollTop某些版本的 iOS 设备上存在问题。

此外，请确保您没有设置 pointer-events:none;给您<a>标签(因为它会在 IoS 上禁用它们)。

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

关于jquery - anchor 标记在移动设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44686741/

24 4 0
文章推荐： swift - 如何使 ObservableObject 符合 Codable 协议(protocol)？
文章推荐： java - GUI 对象在 Mac 上的 Java 中不显示
文章推荐： https 不支持 haproxy
文章推荐： java - 为什么我的变量设置为 0？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com