正文

移动端300ms兼容问题（移动端经典问题）(代码片段)

zhouyideboke  zhouyideboke  2022-12-21  253

关键词：

移动端300ms延迟原因

2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。

双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者单击跳转的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。

鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。

解决方案

1. faskclick https://github.com/ftlabs/fastclick

原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉
缺点: 脚本相对较大, 不建议使用

2.禁用游览器缩放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
这个方案有一个缺点，就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。

3.更改默认的视口宽度

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

一开始，因为双击缩放主要是用来改善桌面站点在移动端浏览体验的。随着发展现在都是专门为移动开发专门的站点，这个时候就不需要双击缩放了，所以移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。
这个方案相比方案一的好处在于，它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。

4.通过 touchstart 和 touchend模拟实现

能不能直接用touchstart代替click呢，
答案是不能，使用touchstart去代替click事件有两个不好的地方。
第一：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果；
第二：使用touchstart事件在某些场景下可能会出现点击穿透的现象。

什么是点击穿透？

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

说明：手机端浏览器基本已经没有300ms延时现象。

移动端兼容性问题解决方案

1.IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,2007年苹果发布首款iphone上IOS系统搭载的safari为了将适... 查看详情

移动端兼容性问题解决方案

如何解决移动端300ms延迟问题(代码片段)

方案一： <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />注释掉vue中public文件夹里面的meta标签方案二：在style中添加*　　touc 查看详情

移动端300ms点击延迟

移动端300ms点击延迟和点击穿透问题一、移动端300ms点击延迟一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作... 查看详情

移动端开发常见的坑

一、移动端开发通用坑1、click300ms延迟？讲道理，现在开发移动端基本是不会有这么一个问题的。但作为移动端以前的经典坑，我这里也拿出来说上一说吧。移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是... 查看详情

移动端常见问题（click300ms延迟）(代码片段)

根本原因：doubleclick双击移动端默认双击情况下会有方法效果，当你点击一次之后，移动端无法判断你是否下一次还会继续完成双击，因此存在300ms延迟有一部分浏览器，比如chrome浏览器，当你在meta头设置width=device-width时，... 查看详情

移动端click300ms延迟，如何解决(代码片段)

背景智能手机开始流行的前期，浏览器可以点击缩放（doubletaptozoom）网页。这样在手机上就可以浏览PC网页浏览器为了分辨click还是“点击缩放”，就强行把click时间延迟300ms触发。初期解决方案[FastClick](https://www.npmjs.com/package/fast... 查看详情

10-移动端开发教程-移动端事件(代码片段)

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。1.PC端事件在移动端的兼容问题1.1click事件的200~300ms延迟问题由于移动端默认的布局视口宽度是980像素，所以... 查看详情

移动端click事件延时

在移动端使用click事件会产生300ms的延迟问题的产生：移动端存在双击放大的问题，所以在移动端点击事件发生时，为了判断用户的行为（到底是要双击还是要点击），浏览器通常会等待300ms，如果300ms之内，用户没有再次点击，... 查看详情

移动端开发通用坑以解决方案(代码片段)

1、click300ms延迟？讲道理，现在开发移动端基本是不会有这么一个问题的。但作为移动端以前的经典坑，我这里也拿出来说上一说吧。移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效... 查看详情

移动端事件

...bkit内核浏览器:webkitRequestFullScreen处理兼容的写法:fullscreen移动端网页点击历史问题解决300ms延迟https://github.com/ftlabs/fastclick（链接中有使用方法）借助第三方工具---fastclick方法注意:touch事件不会等300ms解决300ms延迟方法二--加上阻... 查看详情

移动端点击300ms延迟

转载自：http://www.jianshu.com/p/6e2b68a93c88 一、移动端300ms点击延迟一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是... 查看详情

移动端h5页面点击穿透问题

参考技术A最近移动端m站的开发中遇到了点击穿透问题，就此总结一番。先说下我遇到的问题，项目使用react框架，并且引入了react-fastclick库，可以解决click事件的穿透问题，但是对于下层是a标签的情况，依旧存在穿透问题，会... 查看详情

使用原生js封装tap事件，解决移动端300ms延迟

为了防止误操作，移动端iOS操作系统针对原生click事件做了300ms的延迟，这在一定程度上影响了我们的使用体验。GitHub项目地址：https://github.com/SimonZhangITer/MyTapEventFastClick现在有现成的插件fastclick可以解决这个问题，但是也有... 查看详情

html5移动端触摸事件

一、移动端事件问题1.click事件300ms延迟问题2007年第一代iphone发布，移动端Safari首创双击缩放功能，原理是click一次后，经过300ms之后检测是否再有一次click，如果有就会缩放，如果没有则是一个click事件。所以cilck操作会有卡顿感... 查看详情

移动端测试注意事项(代码片段)

...件：当在屏幕上按下手指时触发touchmove事件：当在屏幕上移动手指时触发touchend事件：当在屏幕上抬起手指时触发touchcancel事件：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作（2）点击事... 查看详情