码迷,mamicode.com
首页 > 移动开发 > 详细

a标签添加:hover,在ios上需要点击2次才能跳转

时间:2017-04-23 22:24:42      阅读:1545      评论:0      收藏:0      [点我收藏+]

标签:标签   css   pre   touch   images   响应式   hover   name   init   

最近发现之前的做的网站在移动端上有个bug,就是我在pc端给tab加了hover样式,但是在ios移动端查看效果时,因为添加了hover需要点击2次,第一次点击是给tab添加hover样式,第二次点击a标签才跳转

技术分享

因为们的网站不是响应式的,但是又要求在移动端可以正常浏览,所以我的解决方法是:把hover样式用js替代css写法,然后判断是移动端或只判断ios时取消hover事件。最后完美解决。

ps:在求助度娘的时候,看到如果你的网站是响应式的可以使用如下方法解决:

(1)网页头部添加meta

<meta name="viewport" content="width=device-width, initial-scale=1"/>

(2)使用js把href改成window.location

 $(‘a‘).on(‘click touchend‘, function(e) {
      var el = $(this);
      var link = el.attr(‘href‘);
      window.location = link;
   });

 亲自试了一下,这种方案是可行的。

a标签添加:hover,在ios上需要点击2次才能跳转

标签:标签   css   pre   touch   images   响应式   hover   name   init   

原文地址:http://www.cnblogs.com/zj917/p/6754201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!