继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

总结移动开发实践中遇到的坑

慕村5518067
关注TA
已关注
手记 1
粉丝 0
获赞 9

1.input placeholder问题在chrome模拟移动端调试时,显示的非常正常,但是在真机上placeholder里面的内容明显靠上,非常的不美观。

解决办法:
不要设计input的line-height或者设置line-height为normal即可。

2.line-height
line-height经常用于文字居中,不同手机显示效果不一样。什么鬼~
line-height的兼容问题不太好解决,容器高度越小,显示效果的差距越明显。

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

3.使用rem (兼容性:IE9+)
原理:浏览器的默认字体高都是16px,
未经调整的浏览器在现实1em=16px。
rem则是只相对于根元素的font-size,即只需要设置根元素的font-size,
其它元素使用rem单位设置成相应的百分比即可;
一般使用:
设置html的font-size为72.5%
html{font-size:72.5%;}
body{font-size:12px;font-size:1.2rem;}
p{font-size:14px;font--size:1.4rem;}

4.实现自定义原生控件的样式
由于select移动端原生样式很丑,但是原生弹出样式符合我们设计的原则。
解决方法:
将原本select设置为透明,z-index设置高~再用一个比较好看的样式‘假装’在表面。

5.移动端使用innerHtml绘制
使用innerHTML绘制大段,之后想获取HTML的ID节点,事实上是获取不到的,这种问题在动态创建DOM会经常发生。

解决方案:
尝试了很多方法之后,老老实实在页面直接用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事件,注意: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。

判断是否滑动:
如果停留时间少于300ms,则认为是快速滑动,无论滑动距离是多少,都到下一页;滑动距离与“容器”大小进行比较,若超过“容器”大小的1/3,则到下一页。

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

解决方法:为绑定click的元素增加css样式cursor:pointer;

附:有一个页面是用ajax加载资料后生成的话,开始最好延时至少100ms再执行加载会好点,不然ios会出现问题无法加载资料。

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP