关于移动端的若干问题

<tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

content meta name content meta name content meta name content 缺点——就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。 ? 方案二：更改默认的视口宽度 ? JavaScript ? meta name content meta name content 如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。 这个方案相比方案一的好处在于，它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。 ? 兼容性问题： ? 对于方案一和方案二，Chrome是率先支持的，Firefox紧随其后，然而令Safari头疼的是，它除了双击缩放还有双击滚动操作，如果采用这种两种方案，那势必连双击滚动也要一起禁用。 ? ? ? ? ? .点击穿透 ? 问题常见发生场景： 假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。 ? 这是因为在移动端浏览器，事件执行的顺序是touchstart touchend click。 ? 而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。 ? 如果A元素是一个链接，那此时页面就会意外地跳转。 ? 解决思路： ? .不要混用touch和click ? .消耗掉touch之后的click ? 解决方法： ? .只用touch ? 把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’），注意：a标签的href也是click，需要换成js的跳转。 ? .改动最小——350ms后再隐藏B元素 ? ? ? ? ? . 虚拟键盘导致 fixed 元素错位 ? fixed元素一定会伴随虚拟键盘的出现，但是虚拟键盘只是“贴”在了viewport上，表面上不会对dom产生“任何”影响，但是这个时候fixed元素表现却变得怪异起来，会错位。 ? 解决原理：虚拟键盘弹出时将fixed元素设置为，虚拟键盘消失时候设置回来。 ? 解决方案：由于虚拟键盘出现并未抛出事件，而检测scroll或者resize事件，皆会有一定延迟，会出现闪烁现象。则当前获取焦点元素为文本元素，就将fixed元素设置为。 ? ? ? ? ? .移动端手势 ? 手指放在屏幕上：ontouchstart ? ? 手指在屏幕上滑动：ontouchmove ? ? ?手指离开屏幕：ontouchend ? 原理： ? .在touchstart事件触发时， ?记录手指按下的时间startTime，本次滑动的初始位置initialPos。 ? .在touchmove事件触发时， 记录当前位置nowPosition（实时移动元素），滑动距离movePosition（当前位置nowPosition与初始位置initialPos的差值），判断正负数再决定是左还是右移动。 ? .在touchend事件触发时， ? 记录手指离开屏幕的时间endTime，获得手指在屏幕上停留的时间（endTime－startTime），滑动距离movePosition ? 判断是否滑动： 如果停留时间少于300ms，则认为是快速滑动，无论滑动距离是多少，都到下一页 滑动距离与‘容器’ ?大小进行比较，若超过‘容器’大小的，则到下一页 .动态生成html元素click失效 ? 这个也是神奇的坑，找了很久资料，也没有很原理的解释。 ? 解决方法： ?为绑定click的元素增加css样式 ? cursor：pointer；（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

<table class="javascript">