|
我最近对我的网站进行了(响应式)重新设计。
奇怪的是，每个测试人员都错过了某些地方的链接的奇怪行为(因为他们认为他们错过了我想象的链接):
如果您点击这些链接，它们只会被“激活”——但不会被关注。如果您再次单击它们，它们就会正常工作。
如果您连续点击 7 个链接，然后再次点击第一个链接，这甚至可以工作。
这只发生在 ios 8.x 上(在 8.4.1 上测试。)但不会发生在 7.x 上，也不会发生在 android 或任何桌面浏览器上。
通过远程调试，我什么也看不到。
我什至不知道从哪里开始调试这个......
可以在此处查看效果(使用 8.x iPhone):http://www.plamundo.de在列出的产品中。
Best Answer-推荐答案
我看到了相同的行为，但仅适用于 8.4.1 而不是 8.4。您的网站上似乎也是如此。 8.4.1 设备需要双击，而 8.4 则只需单击一次。这是我构建的最小测试用例:
<html>
<head>
<title>Minimal testcase iOS 8.4.1 hover double tap problem</title>
<style>
body { font-size: 2em; } /* Only needed for a readable font-size */
a { display: block; font-decoration: none;}
a:hover { font-decoration: underline; }
</style>
</head>
<body>
<a href="http://www.apple.com/" >Click me</a>
</body>
</html>
我们通过设置 'a:hover' 条件来解决这个问题。您可以使用媒体查询(但如果您还想以 iPad 为目标，这很难)或使用一些添加类的 JavaScript 来完成此操作，您可以使用该类来使 CSS 具有选择性。示例:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
与:
.iamanobnoxiousiphonedevice *:hover{
text-decoration: inherit !important;
}
解决此问题的更简单方法是删除“显示: block ”，但我不知道这是否适合您。
关于html - ios safari 奇怪的双击/悬停行为，我们在Stack Overflow上找到一个类似的问题：
https://stackoverflow.com/questions/32146197/
| 
客服电话
APP下载
官方微信
