IOS下WEB开发细节问题

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以屏蔽ios点击元素时出现的阴影

2、-webkit-appearance:none可以屏蔽输入框怪异的内阴影

3、设置这些样式在ios下可以让动画更加流畅（这个属性会调用硬件加速模式），安卓下可能会产生bug

-webkit-transform:translate3d(0,0,0);

-webkit-transform-style:preserve-3d;

-webkit-backface-visibility:hidden;

4、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏

5、css3动画会影响自动聚焦，自动聚焦要在动画执行之前来做

6、input框会默认呼出，如果想隐藏键盘让其失焦即可

7、ios中禁止用户保存图片、复制图片，img标签指定-webkit-touch-callout:none可以禁止设备弹出列表按钮，这样用户就无法保存、复制图片

8、禁止用户复制、选择可以使用-webkit-user-select:none

9、transition过渡和animation都可以实现动态效果，transition多用于执行一次的动画，而animation多用于需要循环的效果，但animation无法用js去动态的改变其动画的参数值，仅可以设置动画的运动状态-webkit-animation-play-state:paused/running，页面渲染时便让动画处在paused状态，需要执行时修改参数为running运行，这种方式效率较高

10、使用css3动画尽量不要让其变换基于元素的基础属性，如width、height、top、left等，应使用transform属性，效率会高很多，流畅度也会更好

11、移动端页面顶部继续往上滑动时，可能会出现一些页面信息，导致整个页面下移，如微信内的页面，可以禁止整个body的touchmove事件来解决此问题，需要滑动的区域再添加touchmove事件，有时候长按屏幕会出现系统自带的放大镜功能，也可以通过禁止touchstart事件解决此问题，然后再给需要click的元素绑定touchstart事件来触发

12、在body标签中设置background-image样式，在手机端显示时，有时会出现加载不出来的情况，解决方案是最好不要在body中设置背景图，可以添加一个层，宽高等于body，在该元素上设置背景图，即可解决