如何解决移动设备上的问题:HTML 标记不起作用
我有一个非常简单的 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)上都能完美运行。
当用户点击/点击 <A>
标签时,似乎在移动网络浏览器(Android 和 IOS 网络浏览器)上没有任何操作。
在 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 代码的兼容性?
解决方法
无法在移动设备上悬停。
尝试在 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。