移动设备上的问题: HTML标记不工作

Question

我有一个非常简单的web应用程序，它将DIVs显示为菜单，然后，在底部有一个“确认”按钮。确认是通过标记<A>启动的

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

因此，这个应用程序(和“确认”按钮)在我用于测试的任何浏览器(Chrome、Firefox、Edge、Opera)上都能很好地工作。

在移动网络浏览器(安卓和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;
}

按钮前面没有DIVs。我试图拦截按钮的onClick和onTap事件，但什么也没有发生。

是否有一种方法可以识别<A>标记的执行块，以及检查移动设备上/ Javascript代码的兼容性？

Answer 1

在移动设备上悬浮是不可能的。

尝试:在CSS中激活或在Javascript中单击。

或者模拟悬停的效果。

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

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

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