300毫秒的故事

300 毫秒点击延迟的来龙去脉 凌征 原文地址:What Exactly Is..... The 300ms Click Delay 快速响应是所有 UI 实现的重中之重.研究表明,当延迟超过 100 毫秒,用户就能感受到界面的卡顿. 然而,出于对手指触摸滑动的区分,移动端页面对于触摸事件会有 300 毫秒的延迟,导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢. 本文主要讨论上述延时的来历,浏览器生产商的考虑,以及我们作为开发者,当前应该如何处理这个问题. 300 毫秒

1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera Mobile 11.5及以上版本 Android 2以来的Android浏览器 PlayBook OS 1及以上版本 2.不应用FastClick的场景 桌面浏览器; 如果视口元标签中设置了width=device-width,Android上的Chrome 32+会禁用300ms延时; <meta name="viewport" cont

解决方案: (1)设置不能缩放:user-scalable=no 不能缩放就不会有双击缩放操作,因此click事件也就没了300ms延迟,这个是Chrome首先在Android中提出的 (2)设置显示宽度:width=device-width Chrome 开发团队在 Chrome 32 这一版中,他们将在包含 width=device-width 或者比 viewport 值更小的页面上禁用双击缩放. (3)IE的指针事件 (Pointer Events):touch-action:none

vue-cli[2.x]中: 安装 npm install fastclick --save 使用: 在main.js中 :先 import fastClick from 'fastclick' 然后 fastClick.attach(document.body) import Vue from 'vue' import App from './App' import router from './router' import fastClick from 'fastclick' import

1.利用CSS穿透 常见发生场景:假如我们需要通过input,type='file'来上传文件,而这个input的默认样式,可以说是非常地"不人道".所以我们希望通过一张图片,与这个input大小一样,位置一致地盖在上面.这个时候,显然,这个时候点击图片,input是不会起作用的.就是因为img隔绝了click的穿透,而我们希望的是,这个img只是视觉上遮挡了input的样式,但是点击的时候还是点击到input.所以,只要让img可穿透即可. css代码如下: 1 img{pointe

总结一下一些知识. 1.利用CSS穿透 常见发生场景:假如我们需要通过input,type=‘file’来上传文件,而这个input的默认样式,可以说是非常地“不人道”.所以我们希望通过一张图片,与这个input大小一样,位置一致地盖在上面.这个时候,显然,这个时候点击图片,input是不会起作用的.就是因为img隔绝了click的穿透,而我们希望的是,这个img只是视觉上遮挡了input的样式,但是点击的时候还是点击到input.所以,只要让img可穿透即可. css代码如下: img{poi

原文地址:What Exactly Is….. The 300ms Click Delay 快速响应是所有 UI 实现的重中之重.研究表明,当延迟超过 100 毫秒,用户就能感受到界面的卡顿. 然而,出于对手指触摸滑动的区分,移动端页面对于触摸事件会有 300 毫秒的延迟,导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢. 本文主要讨论上述延时的来历,浏览器生产商的考虑,以及我们作为开发者,当前应该如何处理这个问题. 300 毫秒延迟的来历 这要追溯至 2007 年初.苹

1.pixel像素基础 1.px:csspixel 逻辑像素,浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定 注:为什么不使用默认的980px的布局viewport 原因: 宽度不可控制,不同的系统设备的默认值都可能不同 页面缩小版显示,交互性不友好 链接不可点 有缩放,缩放后又有滚动 例如font-size为40px等于pc上12px同等物理大小

1.pixel像素基础 1.px:csspixel 逻辑像素,浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定 注:为什么不使用默认的980px的布局viewport 原因: 宽度不可控制,不同的系统设备的默认值都可能不同 页面缩小版显示,交互性不友好 链接不可点 有缩放,缩放后又有滚动 例如font-size为40px等于pc上12px同等物理大小