难以点击触摸屏上的链接答案

【问题标题】：Hard to click links on touchscreen难以点击触摸屏上的链接
【发布时间】：2013-07-15 12:08:03
【问题描述】：

这是我的设置（对不起，不好的索引）：

<div class="container">
   <a href="somewhere">
    <div class="tall"></div>
   </a>
  <a href="somewhere else">
    <div class="small"></div>
  </a>
</div>

我在“容器”上也有一些基本的悬停样式。我的问题是在移动设备上（我目前在 iOS 上测试）围绕“高”和“小”的两个链接很难点击。它们会触发“容器”上的悬停样式，但您必须将手指放在它们上一秒钟（或更长时间）才能真正打开链接。有什么想法可以解决这个问题吗？

【问题讨论】：

不要因为缩进不好而感到抱歉，只需修复它，它会更容易
让它们变大 - 如果某些东西因为太小而难以点击，请将其变大并更容易点击。
不要在 a.使用它不是标准的。块元素不应位于像这样的内联元素中。
大小不是问题，“高”的 div 大约 200px 高，仍然很难点击。
移动浏览器将点击延迟大约 300 毫秒以检测双击。这是你的问题吗？您也许可以禁用此功能。这也意味着在您的页面上双标签将更难。

标签： javascript html ios css touchscreen

【解决方案1】：

不幸的是，链接上的 :hover 选择器在触摸屏设备上会执行此操作 - 即它将显示悬停效果一两秒，然后单击链接。处理此问题的最佳方法是仅检测设备类型并完全删除 :hover 样式。无论如何，您都不需要它来制作触摸屏。

阅读：http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/

【讨论】：