<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
性能优化-------更快,交互优化---------更好用,让用户感知到的响应速度。
知识点一:移动端点击click事件,会有三百毫秒的迟钝。产生的原因是移动端手机为区分点击还是双击,来判断用户是点击还是想放大、缩小,所以就会有延迟来判断。
解决办法:1、引入移动端框架如zepTo.js,不使用click事件而是使用tab事件,但是用户体验还不是最佳,可以给用户加一个点击态,如加一个active伪类。
知识点二:移动端滚动特别缓慢,不流畅。全局滚动(在body上),局部滚动(在body之内)。
解决办法:1、在ios中,如为全局滚动,默认有弹性滚动效果,如为布局滚动,则没有弹性滚动效果,需要在body和滚动元素scroll-el上加上样式。
body{[-webkit-overflow-scrolling: touch} .scroll-el{overflow: auto}
2、在Android在,只使用全局滚动效果。如果顶部或者底部有固定的内容,中间区域怎么实现全局滚动呢?解决办法是在中间区域加上padding-top或者padding-bottom。
知识点三:定制移动端键盘样式定制。
解决:定制input的type属性。如url、email、tel、number、search