威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站
威尼斯888 > 计算机网络 / Web前端 > 我们要的效果就是在PC和移动端都保持一样的效果

原标题:我们要的效果就是在PC和移动端都保持一样的效果

浏览次数:90 时间:2020-05-07

最近都忙死了,好久都没更新博客了。今天还是想提下移动端的问题 :hover选择器。

说到移动和PC端中的hover处理问题,已经碰到过很多次了,先前一直没去仔细的研究过,有时候忽略过去了。众所周知,现在项目都注重交互用户体验,譬如按钮之类的都加上hover效果。但是这个效果在PC端体验很好,如果页面需要做成响应式,那问题就来了,发现在移动端点击按钮后,会执行PC的hover效果,然后再跳转,返回的时候还是保持了hover效果。

我们要的效果就是在PC和移动端都保持一样的效果。于是我想到了:actived选择器,发现在不同手机浏览器上效果不一样,有的有效果,有得却没,烦躁ing.....

后来有一天无意中在美团上团购2张电影票,发现他们的处理方式很好。如果回去打开网站研究了一番,处理方法让我大吃一惊,一句代码搞定:

document.body.addEventListener('touchstart', function;

太神奇了,其实这句代码也没干什么,只有在BODY上绑定了一个touchstart事件。在性能上没什么影响,可以采取。希望能帮到正在为此问题发愁的你,如你有好的方法也可以留言给我。

在这里也想补充一下:在移动端中浏览器会有自带的一个点击高亮效果,可以通过给a标签或者body,html加如下代码:

-webkit-tap-highlight-color:transparent;

本文由威尼斯888发布于计算机网络 / Web前端,转载请注明出处:我们要的效果就是在PC和移动端都保持一样的效果

关键词:

上一篇:促使了WIN7称为了主流

下一篇:如果不能专注地做好用户体验设计