兼容性问题
- android和ios的引擎都是webkit的内核
- 手势操作代替鼠标事件:mousedown,mouseup,click
- 设备分辨率不同:pad,phone ,所以需要"响应式布局"来适应不同的分辨率的机器
- CSS3代替 DOM aination: DOM操作很多时候是在pc端为了适应对ie等浏览器的兼容性来使用 CSS3在移动设备上不需要考虑兼容性,而且比dom操作来实现动画效果更佳高效 CSS3直接用设备的GPU来渲染,更快
touch事件
- touchstart 按下屏幕一瞬间出发
- touchmove 按住屏幕滑动
- touchend 手指离开屏幕
- touchcancel(一般用不到) 触摸操作被系统原生事件打断:比如来电等.
zepto.js
zepto需要额外引入touch.js,它把touch事件封装成了更易用易懂的tap事件 tap singleTap doubleTap longTap
swipe swipeLeft swipeRight swipeUp swipeDown
为什么使用touch事件而不是用click事件
- click 事件延时较长,听说有300ms
- touch 事件支持"多点触摸"
- 手势操作
优化技巧
- 对于图片应用中,用canvas代替image标签来展示. canvas会调用系统gpu加速来展示图片,而image在显示多张图片时会很卡
- drawImage(image,x,y,width,height) 把一张图片"画"入canvas画布中,参数(图片源,canvas画布上的位置(x,y),图片的宽高(默认是图片原来大小,传入值可以控制图片的缩放))
- Image Object
- 预加载图片 img标签可以理解为一个Image Object的实例
- 图片按比例缩放'
CSS3
- 兼容chrome safari opera @-webkit-keyframes 标准定义 @keyframes
- CSS3动画事件 webkitAnimationEnd事件:监听这个事件,当动画执行结束时,采取一个function
- CSS3框架(偷懒神器,感谢作者以及分享着) animate.css的使用 1. link引入animate.css3 2. 把目标元素的设置class为类似: class="animated shake" ,其中shake为具体的动画名称 animate.css
宽高比例不同的图片实现适应性缩放
$(window)获取浏览器窗口对象
$(window).width()获取窗口宽度
&&的意思
比如a()&&b()的意思是,如果a()返回ture,则表达式返回b()的返回值,如果a为false,则返回false