移动开发实践及‘坑’总结

1.input   placeholder问题　　

在chrome 模拟移动端调试时［左边图］，显示的很是正常，可是在真机上［右边图］，placeholder里面的内容明显靠上，很是的不美观

    

在国外网站，对这个属性的兼容性处理，那就是不要设计input的line-height或者设置line-height为normal便可，

试了一下，虽然在谷歌模拟调试里稍微偏上，可是在“真机上”正常垂直居中～

 

2.line－height

line-height常常用于文字居中，不一样手机显示效果不同。什么鬼～

在chrome模拟器上又是显示得很是完美，可是！Android和IOS又各自‘偏移’了。若是把 line-height加1px，iPhone文字就会稍微‘正常显示’，因为咱们app的ios用户居多，而且android机型太多，不一样机型也会显示不一样，因此只能退而求其次了。line-height的兼容问题不太好解决，容器高度越小，显示效果的差距越明显。

解决方案：稍微大一点的高度，最好把line-height设置为高度+1px，两个平台显示都不会太‘奇怪’。

 

3.使用rem  （兼容性：ie9+）

原理：浏览器的 默认字体高都是16px，未经调整的浏览器在显示1em=16px。 rem则是只相对于根元素的font-size，即只须要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比便可；

通常使用：设置html的font-size为62.5%

 1 html {
 2     font-size: 62.5%;
 3 }
 4 body {
 5     font-size: 12px;
 6     font-size: 1.2rem;
 7 }
 8 p {
 9     font-size: 14px;
10     font-size: 1.4rem;
11 }

 

 

4.实现自定义原生控件的样式

因为select移动端原生样式很丑，可是原生弹出样式是符合咱们设计的原则

解决方法：将本来select 设置为透明，z-index设置高～再用一个比较好看的样式‘伪装’在表面

 

5.移动端使用innerHtml绘制

使用innerHTML绘制大段，以后想获取HTML的ID节点，事实上是获取不到的，这种问题在动态建立DOM会常常发生

这也是一个神器的问题，博主本身写了一个移动端轮播插件，在chrome上浏览很是正常，但到了真机上却显示空白，各类百度，最后才发现这么坑的地方…

解决方案：尝试了不少方法以后，老老实实在页面直接用html结构，若是有更好的方法，也请告诉我。

 

6.300ms延迟

• 方案一：禁用缩放

在HTML文档头部包含以下 meta标签时：

<meta name="viewport" content="user-scalable=no"/>

<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>

 

缺点------就是必须经过彻底禁用缩放来达到去掉点击延迟的目的，然而彻底禁用缩放并非咱们的初衷，咱们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操做是不是双击。

 

• 方案二：更改默认的视口宽度

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

若是设置了上述meta标签，那浏览器就能够认为该网站已经对移动端作过了适配和优化，就无需双击缩放操做了。
这个方案相比方案一的好处在于，它没有彻底禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然能够经过双指缩放操做来缩放页面。

 

兼容性问题：

对于方案一和方案二，Chrome是率先支持的，Firefox紧随其后，然而令Safari头疼的是，它除了双击缩放还有双击滚动操做，若是采用这种两种方案，那势必连双击滚动也要一块儿禁用。

 

7.点击穿透

问题常见发生场景： 假如页面上有两个元素A和B。B元素在A元素之上。咱们在B元素的touchstart事件上注册了一个回调函数，该回调函数的做用是隐藏B元素。咱们发现，当咱们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

这是由于在移动端浏览器，事件执行的顺序是touchstart > touchend > click。

而click事件有300ms的延迟，当touchstart事件把B元素隐藏以后，隔了300ms，浏览器触发了click事件，可是此时B元素不见了，因此该事件被派发到了A元素身上。若是A元素是一个连接，那此时页面就会意外地跳转。

解决思路：

1.不要混用touch和click 

2.消耗掉touch以后的click

解决方法：

1.只用touch   把页面内全部click所有换成touch事件（ touchstart 、’touchend’、’tap’），注意：a标签的href也是click，须要换成js的跳转。 

2.改动最小——350ms后再隐藏B元素

 

8. 虚拟键盘致使fixed元素错位

fixed元素必定会伴随虚拟键盘的出现，可是虚拟键盘只是“贴”在了viewport上，表面上不会对dom产生“任何”影响，可是这个时候fixed元素表现却变得怪异起来，会错位。

解决原理：虚拟键盘弹出时将fixed元素设置为static，虚拟键盘消失时候设置回来。

解决方案：因为虚拟键盘出现并未抛出事件，而检测scroll或者resize事件，皆会有必定延迟，会出现闪烁现象。则当前获取焦点元素为文本元素，就将fixed元素设置为static。

 

9.移动端手势

手指放在屏幕上：ontouchstart     手指在屏幕上滑动：ontouchmove      手指离开屏幕：ontouchend

原理：

1.在touchstart事件触发时，  记录手指按下的时间startTime，本次滑动的初始位置initialPos。

2.在touchmove事件触发时， 记录当前位置nowPosition（实时移动元素），滑动距离movePosition（当前位置nowPosition与初始位置initialPos的差值），判断正负数再决定是左仍是右移动。

3.在touchend事件触发时，   记录手指离开屏幕的时间endTime，得到手指在屏幕上停留的时间（endTime－startTime），滑动距离movePosition

• 判断是否滑动：

1. 若是停留时间少于300ms，则认为是快速滑动，不管滑动距离是多少，都到下一页
2. 滑动距离与‘容器’  大小进行比较，若超过‘容器’大小的1/3，则到下一页

 

10.iphone动态生成html元素click失效

这个也是神奇的坑，找了好久资料，也没有很原理的解释。

解决方法：  为绑定click的元素增长css样式   cursor：pointer；