网站首页 > 网络编程 > html 正文
移动端 300 毫秒延迟，指的是当没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现 300ms 左右的延迟。
为什么会有延迟？
1. 先说一下 300毫秒延迟的来历
这个就是当初，也就是 2007 年的时候，苹果公司在发布首款 iPhone 前夕，遇到一个问题 ，当时的网站都是为大屏幕设备所设计的，于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。
这当中最出名的，就当属于双击缩放。这也就是上述 300毫秒延迟的主要原因。
那么这和 300毫秒延迟有什么联系？
假设用户在浏览器中，点击一个链接。由于是用户可以进行双击或者缩放或者其他操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是要双击操作，因此浏览器就会等待 300 毫米，一判断用户是否再次点击了屏幕。于是这就是著名的 300 毫秒延迟。
2. 解决方案
2.1 禁止缩放
首先看一个很直接的解决方案，既然双击缩放仅对那些 可被缩放 的页面存在意义，那可以对不可缩放的页面，直接去掉点击延迟
<meta name="viewport" content="user-scalable=no"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">/
然而这个问题看似完美解决，但也带来了一个缺陷，就是必须完全禁止缩放来达到目的，但中移动端站点的可用性和可访问性来看，缩放是缩放是相当关键的一环。
2.2 width=device-width Meta 标签
除了双击缩放的预定外， iPhone 诞生时就有的另一个约定是， 在渲染桌面站点是时候，使用 980 像素的视口宽度，而非设备本身的宽度
当然，这个问题我们还可以用 <meta> 标签进行配置
<meta name="viewport" content="width=device-width"/>
这个代码就是告诉浏览器色将视口大小设为设备本身的尺寸。
因为双击缩放主要是来改善桌面站点在移动端浏览的体验，为随着响应式的普及，很多站点都已经对移动端做过适配和优化了，这就不需要双击缩放了， 既然站点内包含了 width=device-width 这个 <meta> 标签，也就意味着这个网站是响应式的网站，那么移动端浏览器就可以自动禁止掉双击缩放行为并且去掉 300ms 的点击延迟。
这个方案相对方案1 的好处在于，它没有完全禁止缩放，只是禁用了默认的双击缩放行为，但用户仍然可以通过双指缩放来缩放页面。
2.3 指针事件
指针事件最初是微软提出的。指针事件是一个新的 web 事件系列，对所有输入类型，包括 鼠标(mouse)、触摸（touch）、触控（stylus）等，进行统一处理。
也就是说浏览器不用再为不同的输入设备设计不同的事件，前端工程师也不用写不同的事件响应。而是通过统一的指针事件就可以开发不同的事件处理。一个名为 touch-action 的新 CSS 属性。
根据规范， touch-action 属性决定 “ 是否触摸操作会触发用户代理的默认行为。这包括但不限于双指缩放等行为”。
从实际应用的角度来看， touch-action 解决了用户在点击了目标元素之后，是否能够进行双指缩放后者双击缩放。因此，这也相当于完美地解决了 300 毫秒点击延迟的问题。
touch-action 默认值为 auto，将其设置 none 即可移除目标元素的 300 毫秒延迟。
3. 当前如何避免延迟
尽管浏览器开发商针对 300 毫秒延迟的问题提出了一些解决方案，当目前并没有简单通用的方案。不过好多的开发者考虑过这一问题，并带来了一些基于 JavaScript 的跨平台解决方案。这些方案可以归为两类 —— 指针事件的 polyfill 和 快速点击(fast click)。
3.1 指针事件的 polyfill
现在除了 IE，大部分浏览器还不支持指针事件，有一些 JS 库，可以让我们使用指针事件: 比如
- Google 的 Polymer
- 微软的 HandJS
- @RIch-Harris 的 Points
由于只有 IE 浏览器中可以使用 touch-action 属性，其他浏览器会被忽略，唯一能够检测开发者是否声明了 touch-action: none 的方法是使用 JavaScript 去请求解析所有的样式表。 HandJS 也是这么做的，当时不管从性能或者其他一些复杂方面，这都会遇到问题。
Polymer 则是通过判断标签上的 touch-action 属性， 而非 CSS 代码。
<a href="http://" touch-action="none"></a>
3.2 FastClick
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级库。简单来说，FastClick 在检测到 touched 事件的时候，会通过 DOM 自定义事件立即出发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。
FastClick 的使用方法，在 window.load 事件之后， 在 <body> 上调用 FastClick.attach()
window.addEventListener("load", ()=>{
FastClick.attach(document.body);
}, false )
并且当 FastClick 检测到当前页面使用了基于 <meta> 标签或者 touch-action 属性的解决方案时，会默默退出。
- 上一篇： winio模拟键盘鼠标64位源码
- 下一篇： 易语言简单的登录注册实现源码
猜你喜欢
- 2022-06-27 Html常用单词（htmlcss常用单词）
- 2022-06-27 HTML基本标记的使用方法（html中的标记）
- 2022-06-27 超大型集群第六篇(HTTP协议)（http协议系列1）
- 2022-06-27 html常用代码大全（html的基本代码）
- 2022-06-27 HTML学习笔记（html教学）
- 2022-06-27 HTML个人笔记（html个人博客）
- 2022-06-27 1. 「Web前端开发」-1-什么是HTML（1+web前端初级）
- 2022-06-27 记录:学习html(一):概念（html笔记）
- 2022-06-27 HTML语言简介（html基本语言）
- 2022-06-27 HTML基础入门教程，web前端初学者速成必备（web前端怎么入门）
欢迎 你 发表评论:
- 百度站内搜索
- 关注微信公众号
-
三叶资源网⑤群：
- 网站分类
-
- 网站公告
- 电子书书籍
- 程序员工具箱
- 编程工具
- 易语言相关
- 网络相关源码
- 图形图像源码
- 系统工具源码
- 易语言模块源码
- 易语言支持库
- 数据库类源码
- 易语言例程
- 易语言游戏开发
- 易语言模块
- 多媒体类源码
- 易语言资源网
- 易语言视频教程
- JS分析教程
- 易语言图文教程
- 易语言常见问题及笔记
- 工具源码
- 易语言版本
- 网络编程
- javascript
- PHP编程
- html
- 正则表达式
- 面试题
- nodejs
- 其它综合
- 脚本专栏
- python
- 按键精灵相关
- 按键精灵图文教程
- 按键精灵视频教程
- 按键精灵Q语言
- 按键精灵安卓版
- golang
- 游戏安全
- 火山相关
- 火山安卓软件
- 火山常见问题及笔记
- 火山安卓源码
- 火山视频教程
- 火山PC版本下载
- 火山PC视窗例程
- 互联网那些事
- 引流推广
- 项目揭秘
- 网络营销
- 营销软件
- QQ营销软件
- 娱乐软件
- 机器人插件
- 培训教程
- 技术教程
- 活动线报
- 数据库
- Redis
- Access
- MongoDB
- Mysql
- 问答
- 其它
- 易语言
- 需求
- 在线教程
- 多线程培训班
- 觅风易语言教程
- 模拟系列教程
- 集中营易语言教程
- 历史数据
- 随机tag
- 最新评论
-
访客 评论于：09-28
访客 评论于：09-21
访客 评论于：09-04
访客 评论于：09-04
访客 评论于：08-30
访客 评论于：08-18
访客 评论于：08-18- 访客 评论于：08-17
三叶资源网 评论于：07-25- 访客 评论于：06-26
本文暂时没有评论，来添加一个吧(●'◡'●)