移动端知识

2024-01-09 10:16:34

移动端知识

理解click的300ms的延迟响应
- 如何解决移动端Click事件300ms延迟的问题？
em/rem/meta
vm / vh 与 rem

理解click的300ms的延迟响应

Click事件在移动手机开发中有300ms的延迟，因为在手机早期，浏览器系统有放大和缩放功能，用户在屏幕上点击两次之后，系统会触发放大或者缩放功能，因此系统做了一个处理，当触摸一次后，在300ms这段时间内有没有触摸第二次，如果触摸了第二次的话，说明是触发放大或缩放功能，否则的话是click事件。
因此当click时候，所有用户必须等待于300ms后才会触发click事件。所以当在移动端使用click事件的时候，会感觉到有300ms的迟钝。

如何解决移动端Click事件300ms延迟的问题？

禁止用户缩放

通过完全禁用缩放来达到去掉点击延迟的目的

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

优点：高效，简洁
缺点：通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。

判断是否设置了上述meta标签，来处理缩放功能

双击缩放主要是用来改善桌面站点在移动端浏览体验的，而随着响应式设计的普及，很多站点都已经对移动端坐过适配和优化了，这个时候就不需要双击缩放了，如果能够识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。

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

使用zepto.js的tap事件

tap事件可以理解为在移动端的click事件，而zepto.js因为几乎完全复制jQuery的api，因此常常被用在h5的开发上用来取代jquery

缺陷: 点击穿透：如果一个绝对定位或者固定定位元素处于页面最顶层，对这个元素绑定一个点击事件，那么你点击这个点对应的下面凡是有点击事件或者a标签都会被触发执行.

FastClick.js

FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

npm install fastclick -S

//引入
import fastClick from ‘fastclick’
//初始化FastClick实例。在页面的DOM文档加载完成后
fastClick.attach(document.body)

使用fastClick使得ios唤启软键盘，触点不是很灵敏
解决方法：重写fastClick 设置焦点targetElement.focus();

import FastClick from 'fastclick'

FastClick.attach(document.body)
FastClick.prototype.focus = function(targetElement) {
  var length;
  if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
  }
};

em/rem/meta

em：相对于父元素，相对于当前元素的font-size。
rem：相对于根元素，跟整个body的font-size有关系。
meta：指定浏览器的适口，适口就是可以看见的区域。
layout viewport ：默认适口
visual viewport：可视区域
ideal viewport：理想化的适口

vm / vh 与 rem

rem：
需要动态设置根尺寸font-size。
用户无法设置更大字体（因为有一个动态指定字体的过程，所以用户很难再去处理这个字体）。
vw / vh：
自动缩放/不影响字体
兼容性差

码农公寓