移动设备上的问题：HTML 标记不起作用

Question

我有一个非常简单的 Web 应用程序，它将 DIV 显示为菜单，然后在底部有一个“确认”按钮。 通过标签<A>发起确认

<a href="Shop.asp" id="ConfirmButton" name="ConfirmButton">
    Submit Order <i class="fa fa-arrow-circle-right"></i>
</a>

所以，这个应用程序（和“确认”按钮）在我用于测试的任何浏览器（Chrome、Firefox、Edge、Opera）上都能完美运行。

似乎在移动网络浏览器（Android 和 IOS 网络浏览器）上，当用户点击/单击 <A> 标签时没有任何操作。 在 Windows 上一切正常，但在移动设备上没有任何反应。

<A> 标签在 CSS 上定义

::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.button > a {
display: inline-block;
width: calc(50% - 0px);
padding: 12px;
background-color: #D10024;
color: #FFF;
text-align: center;
font-weight: 700;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
a:hover, a:focus {
    color: #D10024;
    text-decoration: none;
    outline: none;
}
a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.button { //on DIV style
    visibility: visible;
}

按钮前面没有 DIV。 我试图拦截按钮的onClick 和onTap 事件，但没有任何反应。

有没有办法确定是什么阻止了<A>标签的执行，并检查了移动设备上HTML/Javascript代码的兼容性？

Answer 1

无法在移动设备上悬停。

尝试在 CSS 中使用 :active 或在 Javascript 中使用 onclick。

或 ontouchstart 来模拟悬停的效果。

https://www.w3schools.com/jsref/event_touchstart.asp

另外，我为你找到了一篇文章：

https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c