最近做了一个 touch 活动页的开发，开发过程中遇到了一些小问题。 由于开发经验的不足，面对这些问题不知道从何入手，而且只能通过试的方式， 所以目前的解决方案不一定是最好的。只是将这些问题解决了。
###CSS3 animation
首先是一个对于 CSS3 animation 的使用。在此之前希望说缩写，能让代码更短一点， 代码如下：
-webkit-animation: animateName .5s ease-in-out 0s infinite running;
以上代码到iphone的safari上没有执行。但在chrome上执行了，一开始以为是兼容性问题，
为了解决问题，迅速将缩写拆成逐条模式，问题很快就解决了，但是后来仔细了解了一下，
是因为缩写的最后一项 play-state 不能写在缩写里，这个参数是控制动画停动的参数，
甚至可以通过 JS 直接对这个 css 属性进行操作来控制动画的停动。
正确的缩写格式：
animation: name duration timing-function delay iteration-count direction;
###position: fixed
当时做了一个遮挡全屏的模态，开始准备使用position: fixed，如果屏幕不会动态的改变的话是没有问题的。
- 如果有多个
input在弹层里面，input获取焦点以后呼起键盘，在弹层中切换焦点的时候整个页面会跳动。 - 在键盘呼起之后，页面上除了默认事件，其他事件捕获不到。键盘呼起之后由于屏幕的改变，弹层大小也会改变，
- 在键盘又消失的时候，模态的大小会由小变大，而且弹层还会由于屏幕的瞬间改变，和键盘呼起部分重叠会被遮盖。
- 在键盘完全消失之后遮罩层不能完全遮住屏幕
解决方式：采用position: absolute将高度设置为max(文档,屏幕的高度)，并且在window.resize()对这个值进行实时改变。
###盒模型
在非标准盒模型中，padding和border都会计算在高度之中，也影响了 jQuery 对于高度的取值。
###height
在制作动画的时候，将高度设置为0时，内容是不会被相应的隐藏的，文字和图片都在。
这个时候需要设置overflow: hidden隐藏高度
###0 和 0%
这简直是个神坑。在做 CSS3 动画时，操作帧数的时候，0一般都写0，但这样写在魅族手机的浏览器里动画是不起作用的。必须写0%