(1). input placeholder问题
在手机上,placeholder内容明显靠上
解决办法: 不要设计input 的line-height或line-height设为normal.
(2). line-height 在手机上会偏移。
解决办法:line-height: 高度 + 1;
(3). 使用rem:
兼容ie9 + ;
浏览器默认高度16px; 1em = 16px;
rem只相对于根元素的font-size, 即只需要设置根元素的font-size,一般设置html的font-size: 62.5%;
(4). 300ms延迟
方法: 禁用缩放
<meta name="viewport" content="user-scalable=no"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
方法二:更改默认的视口宽度。
<meta name="viewport" content="width=device-width"/>
兼容性问题: Safari除了双击缩放还有双击滚动操作
(5). 点击穿透
假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数,该回调函数的作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。
移动端的事件执行顺序是touchstart > touchend > click.
不要混用touch和click;
取消掉touch之后的click;
解决方法:1).只用touch 把页面内所有click全部换成touch事件( touchstart 、’touchend’、’tap’),注意:a标签的href也是click,需要换成js的跳转。2).延迟350ms隐藏B。
(6). 出现虚拟键盘导致fixed元素错位
解决办法: 由于虚拟键盘出现并未抛出事件,而检测scroll或者resize事件,皆会有一定延迟,会出现闪烁现象。则当前获取焦点元素为文本元素,就将fixed元素设置为static。
(7). 移动端手势
手指放在屏幕上:ontouchstart 手指在屏幕上滑动:ontouchmove 手指离开屏幕:ontouchend;
1.在touchstart事件触发时, 记录手指按下的时间startTime,本次滑动的初始位置initialPos。 2.在touchmove事件触发时, 记录当前位置nowPosition(实时移动元素),滑动距离movePosition(当前位置nowPosition与初始位置initialPos的差值),判断正负数再决定是左还是右移动。 3.在touchend事件触发时, 记录手指离开屏幕的时间endTime,获得手指在屏幕上停留的时间(endTime-startTime),滑动距离movePosition 判断是否滑动: 如果停留时间少于300ms,则认为是快速滑动,无论滑动距离是多少,都到下一页 滑动距离与‘容器’ 大小进行比较,若超过‘容器’大小的1/3,则到下一页
(8). iphone动态生成的html元素click失效
解决方法: 为绑定click的元素增加css样式 cursor:pointer;