移动wap隐藏的坑

最新推荐文章于 2022-05-30 11:06:15 发布

weixin_30849403

最新推荐文章于 2022-05-30 11:06:15 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/you000/p/5465928.html

本文介绍如何通过CSS伪类:active、tap事件替代click、CSS3动画优化等手段提高移动端Web性能，同时提供了解决input搜索框自带关闭按钮样式问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

非原创，只做转载

------------------------------------------------------------------------------------------------------

伪类 :active 生效

要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件

<style>
a {
  color: #000;
}
a:active {
  color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
  document.addEventListener('touchstart',function(){},false);
</script>

JS 事件相关

click 事件普遍 300ms 的延迟在手机上绑定 click 事件，会使得操作有 300ms 的延迟，体验并不是很好。开发者大多数会使用封装的 tap 事件来代替 click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成

使用 CSS3 动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏。

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

部分机型存在type为search的input，自带close按钮样式修改方法

#Search::-webkit-search-cancel-button{
    display: none;    
}

尽可能多的利用硬件能力，如使用3D变形来开启GPU加速

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;