HTML 链接在移动设备上不可点击，但在桌面设备上可点击

Question

我在使用移动网站 www.thefriendlydentist.ie 顶部的两个按钮时遇到问题

它们可以在桌面上点击，但在移动设备上我没有反应？

html 放置在 WP 主题的标题中。

<div id="topcontact-2" style="background-color:white;">
<a href="tel:012863787"><p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p> </a>
<a href="mailto:info@thefriendlydentist.ie"> <p style="background-color:white;padding:none;" class="call-button" id="email-button">  EMAIL US </p> </a>

</div>

Answer 1

删除下面的代码块或 display:hidden on mobile 在您的主题中。

如果您使用移动设备工具栏查看桌面浏览器，您将看到这些元素填充了所有页面，因此您的按钮位于它们之后。

<div class="mobile-bg-fix-img-wrap">
    <div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>

您可以在图片中看到上述元素如何填充页面。

Answer 2

请进入您的 CSS 并进行此更改。

.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}

到：

.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}

顶部和左侧设置为 0 重叠了两个按钮，导致您无法单击它们。

Answer 3

HTML 链接在移动设备上不可点击，但可在桌面设备上点击。 我有一个解决方案。 尝试这个

html

<a href="https://www.stackoverflow.com" class="goclick">

css

.goclick{
position: relative;
z-index: 9;
}

Answer 4

为此，请转至 Google Chrome > Developer tools 。

检查元素，如果它被任何东西重叠，添加clear: both;

到重叠元素。

实际上，在我的问题中，它解决了所有问题。

Answer 5

对我来说，我有一堂课...

z-index: -1

这迫使父<div>回到后面。 将此更改为0或简单地将其删除，解决了问题

参考： https : //www.sitepoint.com/community/t/solved-href-not-working/248882/6