zoukankan      html  css  js  c++  java
  • 300毫秒的延迟问题

    移动端点击屏幕会有一个300毫秒延迟的问题
    我们也会经常有看到解决办法 FastClick等等引用一些js文件之类的
    我这个人呢,就是不见黄河不掉泪这种,我喜欢问为什么?而且这种为什么,如果是约定的那种,
    比如css(表现)javascrit(行为)html(结构),这种定义,我会很怀疑,并且觉得为什么是这样定义,而不是html是架子什么之类的。
    也就是钢精。
    今天记录300毫秒延迟的这个问题,也是解决我一直以来的疑问,我以前的时候写过的H5页面并没有延迟过啊
    看下面的内容
    内容节选自书籍-《触类旁通-多终端时代的触屏界面设计》
    很长一段时间,几乎所有的触屏浏览器都存在一个问题,在手指点击屏幕300毫秒之后,目标对象上的click事件才会被触发。1/3秒的事件,
    足够让用户察觉到延迟 ,这也是触屏设备上的网页操作效率总是让人觉得不如本地APP来的轻快的原因之一。探究其本质,问题就出在浏览器用
    来缩放内容的双击手势上:浏览器探测到第1次点击之后,会等待300毫秒来判断是否有第2次点击,如果确定没有第2次点击,才会将之前的行为判定为单击。
    所以浏览器其实有能力对点击行为进行及时响应,只是被认为增加了延迟规则而已。
    绝大多数浏览器都会将双击专门保留为缩放所用,而Android上的chrome和Firfox在这里取了个巧,如果页面代码中已经明确禁用了缩放功能,就不再通过延迟来判断
    单击或者双击。看上去是一个好办法,不过这同时也会使捏合和扩张手势的缩放功能失效。很多人在使用移动浏览器访问网页的时候,都需要放大页面才能阅读内容,所以这种
    为了避免延迟而从整体上禁用页面缩放功能的做法显然是得不偿失的。
    2013年,chrome尝试采用一种更加实用的解决方案-如果页面的宽度定位device-width,那么双击缩放行为将不被浏览器受理。

    <meta name="viewport" content="width=device-width"/>
    

    最棒的是这种情况下,人们可以使用手指实现页面缩放。
    ie允许通过css禁用双击缩放功能,比如属性touch-action。
    当然对于其他的一些浏览器,就无能为力了。如果确实需要在其他的浏览器中解决这一问题,就必须借助一些第三方的库了。
    比如FastClick库。还有指针事件,下次再说

  • 相关阅读:
    剑指OFFER----面试题37. 序列化二叉树
    剑指OFFER----面试题36. 二叉搜索树与双向链表
    剑指OFFER----面试题35. 复杂链表的复制
    6.深拷贝与浅拷贝
    DevExpress ASP.NET v19.1版本亮点:发布全新的Gantt控件
    MFC界面库BCGControlBar v30.1新功能详解:Dialogs和Forms
    Kendo UI for jQuery使用教程:支持Web浏览器
    DevExpress Windows 10 v19.1新版亮点:UWP控件新功能全面解析
    Java 11必掌握的8大特性,完美代码信手拈来
    Kendo UI for jQuery使用教程:入门指南
  • 原文地址:https://www.cnblogs.com/smart-girl/p/13082084.html
Copyright © 2011-2022 走看看