iOS应用WebView及Safari中锚点标签双击触发问题求助

针对你遇到的iOS（含Safari和WebView）下a标签需要双击才触发跳转的问题，结合你的代码和Bootstrap环境，试试以下几个可行方案：

方案1：添加touch-action: manipulation CSS属性 #

iOS Safari/WebView默认会对可点击元素等待300ms判断是否为双击缩放，添加这个属性可以跳过等待逻辑，直接响应单次点击。修改你的CSS：

.border-maroon{
  border-radius: 0 30px 30px 0!important;
  touch-action: manipulation; /* 新增这行 */
  cursor: pointer; /* 可选，明确指针样式帮助iOS识别可点击元素 */
}

也可以针对移动端单独设置：

@media (max-width: 767px) {
  a.nav-link {
    touch-action: manipulation;
    cursor: pointer;
  }
}

方案2：移除li元素的tabindex="0" #

你的li标签设置了tabindex="0"，这会让li成为可聚焦元素，在iOS WebView中可能干扰子元素a标签的点击事件触发逻辑，直接删除该属性：

<li class="nav-item"> <!-- 去掉tabindex="0" -->
  <a href="index.php?page=home" class="nav-link border-maroon <?=$page=='home'?'active_class':''?>">
    <i class="nav-icon fas fa-tachometer-alt"></i>
    <p>Dashboard</p>
  </a>
</li>

方案3：排查Bootstrap事件冲突 #

如果你使用了Bootstrap的导航组件，确认是否因为Bootstrap的JS（如dropdown、collapse模块）导致事件冒泡或阻止默认行为。可以临时禁用导航相关JS测试，排除框架冲突问题。

方案4：修复元素层级覆盖问题 #

检查a标签是否被父元素、伪元素或其他透明元素覆盖，可通过提升层级确保点击目标正确：

.nav-link.border-maroon {
  position: relative;
  z-index: 1;
}

优先尝试方案1和方案2，这两个是解决iOS点击延迟最常见的手段，多数场景下能快速解决问题。

内容的提问来源于stack exchange，提问作者Vasu_Sharma