方法一:禁止缩放(在meta标签中设置) Chorm和Firfox支持,Safari比较麻烦他还有双击缩放还有双击滚动操作
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>页面不可缩放,这样双击缩放功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
缺点:必须完全禁用缩放来达到目的,但是通常情况下,我们还是希望能通过双指来进行缩放的
方法二:更改默认的视口宽度(在meta标签中设置) Chorm和Firfox支持,Safari比较麻烦他还有双击缩放还有双击滚动操作
<meta name="viewport" content="width=device-width"/>如果能识别出一个网站是响应式的网站,那么移动端浏览器就可以自动禁止双击缩放行为并去掉300ms的点击延迟。
设置上述的meta标签,那么浏览器就可以认为网站已经对移动端做过适配优化,就无需双击操作。
好处:没有完全禁用缩放,而是禁用浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面。
方法三:css touch-action IE支持
touch-action:指定相应的元素上能够触发的用户代理(浏览器)的默认行为。
将该属性值设置为touch-action:none,那么表示在该元素上操作不会触发用户代理的任何默认行为。就无需进行300ms的延迟判断了。
方法四:FastClick 专门为解决移动端浏览器300ms点击延迟问题发开的一个轻量级的库。
原理:在检测到touchend事件的时候,会通过DOM自定义事件立即发出模拟一个click事件,并把300ms之后发出的click事件阻止掉。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |