# 移动端常见问题

# 1、手机页面上面按钮点击的时候有阴影如何除去

*{ 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */ 
}

1
2
3
4

解释：tap-highlight-color 设置或检索对象的轻按时高亮。当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色，如果想取消这个高亮，将值设置为全透明即可，比如transparent。

# 2、常见的meta

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />

体验demo，解决在主屏幕打开页面后，点击页面链接不会跳转到系统自带的Safari 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent -->

viewport模板——通用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
这里开始内容
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 3、关于 ios 限制 input 自动聚焦的解决办法

ios 系统禁止 input 自动聚焦，所以 DOM.focus() 方法并不生效，通过查阅资料，可以给 input 一个 click 事件，并在其中触发 focus 事件即可。再给 input 触发 click 事件。

$(element).on('click',function(){
  $(element).focus();
 })
setTimeout(function() {
  $(element).trigger('click');
 }, 100);

1
2
3
4
5
6

# 4、移动端Click点击300毫秒延迟及其解决办法。

快速响应是所有 UI 实现的重中之重。研究表明，当延迟超过 100 毫秒，用户就能感受到界面的卡顿。然而，出于对手指触摸滑动的区分，移动端页面对于触摸事件会有 300 毫秒的延迟，导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢。

移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两次，可以看到内容或者图片放大，再次双击，浏览器会将网页缩放至原始比例。

浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。那么如何避免延迟呢？

# 方法1：禁止缩放

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

使用这个方法必须完全禁用缩放来达到目的，虽然大部分移动端能解决这个延迟问题，但是部分苹果手机还是不行。

# 方法2：利用fastclick.js

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。

第一步：在页面中引入fastclick.js文件。

第二步：在js文件中添加以下代码

在 window load 事件之后，在body上调用FastClick.attach()即可。

window.addEventListener(function(){
   FastClick.attach(document.body);
},false);

1
2
3

如果你项目使用了JQuery，就将上面的代码改写成：

$(function(){
		FastClick.attach(document.body);
});

1
2
3

# 方法3：指针事件

指针事件最初由微软提出，现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。指针事件是一个新的 web 事件系列，相应的规范旨在使用一个单独的事件模型，对所有输入类型，包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等，进行统一的处理。用css设置-ms-touch-action: none，那么对应的元素在被点击之后，浏览器不会启动缩放操作，也就避免了这个300ms延迟，但目前只有IE10+支持，目前touch开发的重点在safari和chrome.

指针事件 (Pointer Events) 目前兼容性不太好，不知道在以后会不会更加支持。

# 方法4：jQuery和zepto.js都支持tap事件取代click事件

但是tap事件可能会出现“点透”事件。

问题由来：zepto的tap通过监听绑定在document上的touch事件来完成tap事件的模拟的，及tap事件是冒泡到document上触发的。在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。

# 点透行为

假设有两个层级，A和B；A在上面，B在下面。如果A监听touch事件(zepto的tap事件)，而且B上有个链接(或者监听click事件)，那么当touch A后，先后触发了touchStart和touchEnd事件，touchEnd后A层隐藏，而此刻会触发在document最前面B的click事件；这就是点透行为。

# 5、移动端前端常见的触摸相关事件touch、tap、swipe等整理

参考

← CSS布局 CSS实现自适应正方形和矩形 →